-
+
+
+
);
}
+
export default App;
diff --git a/simpletodo/src/Card.css b/simpletodo/src/Card.css
new file mode 100644
index 0000000..168e96d
--- /dev/null
+++ b/simpletodo/src/Card.css
@@ -0,0 +1,44 @@
+
+.card {
+ display: block;
+ flex-wrap: wrap;
+ width: 330px;
+ margin-right: 40px;
+ margin-bottom: 40px;
+ justify-content: space-between;
+ border-color: black;
+ border-radius: 30px;
+ box-shadow: 0 4px 8px 0 rgba(17, 15, 15, 0.8);
+}
+
+.cardButton {
+ background-color: rgb(255, 255, 255) !important;
+ padding: 10px 20px!important;
+ font-size: 13px!important;
+ border-radius: 35px!important;
+ margin-bottom: 20px !important;
+ text-align: center !important;
+ display: inline-block !important;
+}
+
+.cardTitle {
+ text-align: center;
+ color: darkslategrey;
+ width: 330px;
+ height: 40px;
+ font-size: 20px;
+}
+
+.cardDetails {
+ text-align: center;
+ color: darkslategrey;
+ width: 330px;
+ height: 90px;
+}
+
+.buttonDiv {
+ text-align: center;
+ width: 290px;
+ height: 30px;
+ margin: 20px;
+}
diff --git a/simpletodo/src/classes/Task.tsx b/simpletodo/src/classes/Task.tsx
new file mode 100644
index 0000000..7b536da
--- /dev/null
+++ b/simpletodo/src/classes/Task.tsx
@@ -0,0 +1,10 @@
+import {UrgentType} from '../enums/UrgentType';
+
+export class Task {
+ constructor(
+ readonly id: string,
+ readonly title: string,
+ readonly details: string,
+ readonly urgentType: UrgentType
+ ) {}
+}
diff --git a/simpletodo/src/components/CardForTask.tsx b/simpletodo/src/components/CardForTask.tsx
new file mode 100644
index 0000000..7ceb1d0
--- /dev/null
+++ b/simpletodo/src/components/CardForTask.tsx
@@ -0,0 +1,37 @@
+import {Task} from '../classes/Task';
+import '../Card.css';
+import {Button} from '@mui/material';
+
+
+type props = {
+ item: Task,
+ finishTask(fnTask: string):void};
+
+
+const CardForTask = ({item, finishTask}: props) => {
+ const backgroundColors = {
+ TODAY: 'rgb(255, 0, 0, .3)',
+ WEEK: 'rgb(249, 105, 14, .3)',
+ MONTH: 'rgb(255, 255, 0, .3)',
+ YEAR: 'rgba(51, 170, 51, .3)'
+ }
+
+ function setBackgroundColor() {
+ return backgroundColors[item.urgentType];
+ }
+
+ return (
+
+
{item.title}
+
{item.details}
+
+
+
+
+ )
+}
+
+
+export default CardForTask;
diff --git a/simpletodo/src/components/Container.tsx b/simpletodo/src/components/Container.tsx
new file mode 100644
index 0000000..a6e30ef
--- /dev/null
+++ b/simpletodo/src/components/Container.tsx
@@ -0,0 +1,93 @@
+import {UrgentType} from '../enums/UrgentType';
+import {Button, FormControl, MenuItem, TextField} from '@mui/material';
+import React, {useEffect, useState} from 'react';
+import {Task} from '../classes/Task';
+import CardForTask from './CardForTask';
+import { v4 as uuidV4 } from 'uuid';
+
+const MainContainer = () => {
+
+ const [title, setTitle] = useState
("");
+ const [details, setDetails] = useState("");
+ const [urgentType, setUrgentType] = useState(UrgentType.TODAY);
+ const [tasks, setTasks] = useState(loadTasks);
+
+
+ const handleClick = (): void => {
+ let newTask: Task = new Task(uuidV4(),title, details, urgentType);
+ setTasks([...tasks, newTask]);
+ setTitle("");
+ setDetails("");
+ setUrgentType(UrgentType.TODAY);
+ }
+
+ const cards = tasks.map((element) => );
+
+ function saveTasks() {
+ localStorage.setItem("TASKS", JSON.stringify({tasks}))
+ }
+
+ useEffect(saveTasks, [handleClick]);
+
+ function loadTasks(): Task[] {
+ const taskJSON = localStorage.getItem("TASKS");
+ if (taskJSON === null) return [];
+ return JSON.parse(taskJSON).tasks;
+ }
+
+ function finishTask(finishedTask: string): void {
+ setTasks(tasks.filter( (task) => {
+ return task.id !== finishedTask;
+ }))
+ }
+
+
+ return (
+ <>
+
+ {cards}
+
+ )
+}
+
+export default MainContainer;
diff --git a/simpletodo/src/components/Title.tsx b/simpletodo/src/components/Title.tsx
new file mode 100644
index 0000000..7886f06
--- /dev/null
+++ b/simpletodo/src/components/Title.tsx
@@ -0,0 +1,10 @@
+
+const Title = () => {
+ return(
+
+
Welcome to my ToDo Application!
+
+ )
+}
+
+export default Title;
diff --git a/simpletodo/src/enums/UrgentType.ts b/simpletodo/src/enums/UrgentType.ts
new file mode 100644
index 0000000..8ad89ab
--- /dev/null
+++ b/simpletodo/src/enums/UrgentType.ts
@@ -0,0 +1,2 @@
+
+export enum UrgentType {TODAY = 'TODAY', WEEK='WEEK', MONTH='MONTH', YEAR='YEAR'};
diff --git a/simpletodo/src/index.tsx b/simpletodo/src/index.tsx
index 032464f..4708764 100644
--- a/simpletodo/src/index.tsx
+++ b/simpletodo/src/index.tsx
@@ -8,12 +8,7 @@ const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
-
-
);
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
diff --git a/simpletodo/tsconfig.json b/simpletodo/tsconfig.json
index a273b0c..e56725f 100644
--- a/simpletodo/tsconfig.json
+++ b/simpletodo/tsconfig.json
@@ -18,7 +18,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "suppressImplicitAnyIndexErrors": true
},
"include": [
"src"