From 445ba3b091d6bcbe3b92f99651758c45e0931051 Mon Sep 17 00:00:00 2001
From: Kasssiiii <kasia.gru@gmail.com>
Date: Sun, 8 Jun 2025 06:48:53 +0200
Subject: [PATCH 1/8] added packages to the project

---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index caf6289..8faa9b3 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lottie-react": "^2.4.1",
+    "moment": "^2.30.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

From b76bf570b244563138445a80a4c835ce04f42a97 Mon Sep 17 00:00:00 2001
From: Kasssiiii <kasia.gru@gmail.com>
Date: Sun, 8 Jun 2025 13:50:17 +0200
Subject: [PATCH 2/8] my take on tasks storage

---
 src/store.jsx | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/store.jsx

diff --git a/src/store.jsx b/src/store.jsx
new file mode 100644
index 0000000..e3f79e9
--- /dev/null
+++ b/src/store.jsx
@@ -0,0 +1,70 @@
+import moment from "moment";
+import { create } from "zustand";
+
+export const useNoteStore = create((set) => {
+  return {
+    todos: [
+      {
+        text: "test",
+        date: moment.now(),
+        checked: false,
+      },
+    ],
+    addNewTask: (newTodo) =>
+      set((state) => {
+        const newTodos = [...state.todos];
+        newTodos.push({ text: newTodo, date: moment.now(), checked: false });
+        return { todos: newTodos };
+      }),
+    removeTask: (todotext, date) =>
+      set((state) => {
+        const newTodos = [];
+        for (const todo in state.todos) {
+          if (todotext === todo.text && date === todo.date) {
+            // skip
+          } else {
+            newTodos.push(todo);
+          }
+        }
+        return { todos: newTodos };
+      }),
+    toggleChecked: (todotext, date) =>
+      set((state) => {
+        const newTodos = [];
+        for (const todo in state.todos) {
+          if (todotext === todo.text && date === todo.date) {
+            newTodos.push({
+              text: todo.text,
+              date: todo.date,
+              checked: !todo.checked,
+            });
+          } else {
+            newTodos.push(todo);
+          }
+        }
+        return { todos: newTodos };
+      }),
+    checkAllTasks: () =>
+      set((state) => {
+        const newTodos = [];
+        for (const todo in state.todos) {
+          newTodos.push({
+            text: todo.text,
+            date: todo.date,
+            checked: true,
+          });
+        }
+        return { todos: newTodos };
+      }),
+    removeAllDoneTasks: () =>
+      set((state) => {
+        const newTodos = [];
+        for (const todo in state.todos) {
+          if (todo.checked === false) {
+            newTodos.push(todo);
+          }
+        }
+        return { todos: newTodos };
+      }),
+  };
+});

From d327caedfb586cdbbb67317a23cf8b64dff22fff Mon Sep 17 00:00:00 2001
From: Kasssiiii <kasia.gru@gmail.com>
Date: Sun, 8 Jun 2025 14:59:57 +0200
Subject: [PATCH 3/8] basic HTML structure

---
 src/App.jsx                  | 14 +++++++++++---
 src/components/NewTask.jsx   | 26 ++++++++++++++++++++++++++
 src/components/StatusBar.jsx | 13 +++++++++++++
 src/components/Task.jsx      | 25 +++++++++++++++++++++++++
 src/components/TaskList.jsx  | 14 ++++++++++++++
 5 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/components/NewTask.jsx
 create mode 100644 src/components/StatusBar.jsx
 create mode 100644 src/components/Task.jsx
 create mode 100644 src/components/TaskList.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 5427540..fffc248 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,13 @@
+import NewTask from "./components/NewTask";
+import StatusBar from "./components/StatusBar";
+import TaskList from "./components/TaskList";
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
-  )
-}
+    <div>
+      <NewTask />
+      <StatusBar />
+      <TaskList />
+    </div>
+  );
+};
diff --git a/src/components/NewTask.jsx b/src/components/NewTask.jsx
new file mode 100644
index 0000000..3645b3c
--- /dev/null
+++ b/src/components/NewTask.jsx
@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+
+const NewTask = () => {
+  const [toDo, setToDo] = useState("");
+
+  const addToDo = () => {
+    console.log("sending post");
+  };
+
+  return (
+    <form className="toDoBox" onSubmit={(ev) => ev.preventDefault()}>
+      <label>Add you task!</label>
+      <textarea
+        className="toDoArea"
+        type="text"
+        value={toDo}
+        onChange={(ev) => setToDo(ev.target.value)}
+      />
+      <button onClick={addToDo} className="addToDoButton">
+        Add
+      </button>
+    </form>
+  );
+};
+
+export default NewTask;
diff --git a/src/components/StatusBar.jsx b/src/components/StatusBar.jsx
new file mode 100644
index 0000000..28544bf
--- /dev/null
+++ b/src/components/StatusBar.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const StatusBar = () => {
+  return (
+    <div>
+      <span>X tasks</span>
+      <button>Complete All</button>
+      <button>Clear Completed</button>
+    </div>
+  );
+};
+
+export default StatusBar;
diff --git a/src/components/Task.jsx b/src/components/Task.jsx
new file mode 100644
index 0000000..5e1498f
--- /dev/null
+++ b/src/components/Task.jsx
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+const Task = () => {
+  const [checked, setChecked] = useState(false);
+
+  const toggle = (isChecked) => {
+    //toggle
+    setChecked(isChecked);
+  };
+
+  return (
+    <div>
+      <span>To Do Text</span>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => toggle(event.target.checked)}
+      />
+      <span>X minutes ago</span>
+      <button>Remove</button>
+    </div>
+  );
+};
+
+export default Task;
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
new file mode 100644
index 0000000..efcfece
--- /dev/null
+++ b/src/components/TaskList.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import Task from "./Task";
+
+const TaskList = () => {
+  return (
+    <div>
+      <Task />
+      <Task />
+      <Task />
+    </div>
+  );
+};
+
+export default TaskList;

From 89ba185a697e2844f28bb6d71942211e930322c9 Mon Sep 17 00:00:00 2001
From: Kasssiiii <kasia.gru@gmail.com>
Date: Sun, 8 Jun 2025 20:30:02 +0200
Subject: [PATCH 4/8] oups, that's not how javascript array loops do

---
 src/store.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/store.jsx b/src/store.jsx
index e3f79e9..100441a 100644
--- a/src/store.jsx
+++ b/src/store.jsx
@@ -9,6 +9,11 @@ export const useNoteStore = create((set) => {
         date: moment.now(),
         checked: false,
       },
+      {
+        text: "test2",
+        date: moment.now(),
+        checked: true,
+      },
     ],
     addNewTask: (newTodo) =>
       set((state) => {
@@ -19,7 +24,8 @@ export const useNoteStore = create((set) => {
     removeTask: (todotext, date) =>
       set((state) => {
         const newTodos = [];
-        for (const todo in state.todos) {
+        for (const index in state.todos) {
+          const todo = state.todos[index];
           if (todotext === todo.text && date === todo.date) {
             // skip
           } else {
@@ -31,7 +37,8 @@ export const useNoteStore = create((set) => {
     toggleChecked: (todotext, date) =>
       set((state) => {
         const newTodos = [];
-        for (const todo in state.todos) {
+        for (const index in state.todos) {
+          const todo = state.todos[index];
           if (todotext === todo.text && date === todo.date) {
             newTodos.push({
               text: todo.text,
@@ -47,7 +54,8 @@ export const useNoteStore = create((set) => {
     checkAllTasks: () =>
       set((state) => {
         const newTodos = [];
-        for (const todo in state.todos) {
+        for (const index in state.todos) {
+          const todo = state.todos[index];
           newTodos.push({
             text: todo.text,
             date: todo.date,
@@ -59,7 +67,8 @@ export const useNoteStore = create((set) => {
     removeAllDoneTasks: () =>
       set((state) => {
         const newTodos = [];
-        for (const todo in state.todos) {
+        for (const index in state.todos) {
+          const todo = state.todos[index];
           if (todo.checked === false) {
             newTodos.push(todo);
           }

From 1b5b540b3e485b74d0fbb0b5146231f1c93ddb12 Mon Sep 17 00:00:00 2001
From: Kasssiiii <kasia.gru@gmail.com>
Date: Sun, 8 Jun 2025 20:41:04 +0200
Subject: [PATCH 5/8] hooked up React to Zustand state

---
 src/components/NewTask.jsx   |  7 ++++++-
 src/components/StatusBar.jsx |  9 ++++++---
 src/components/Task.jsx      | 29 ++++++++++++++++++-----------
 src/components/TaskList.jsx  |  8 +++++---
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/NewTask.jsx b/src/components/NewTask.jsx
index 3645b3c..3b96486 100644
--- a/src/components/NewTask.jsx
+++ b/src/components/NewTask.jsx
@@ -1,10 +1,15 @@
 import React, { useState } from "react";
+import { useNoteStore } from "../store";
 
 const NewTask = () => {
   const [toDo, setToDo] = useState("");
 
+  const { addNewTask } = useNoteStore();
+
   const addToDo = () => {
-    console.log("sending post");
+    if (toDo) {
+      addNewTask(toDo);
+    }
   };
 
   return (
diff --git a/src/components/StatusBar.jsx b/src/components/StatusBar.jsx
index 28544bf..aff7123 100644
--- a/src/components/StatusBar.jsx
+++ b/src/components/StatusBar.jsx
@@ -1,11 +1,14 @@
 import React from "react";
+import { useNoteStore } from "../store";
 
 const StatusBar = () => {
+  const { todos, checkAllTasks, removeAllDoneTasks } = useNoteStore();
+
   return (
     <div>
-      <span>X tasks</span>
-      <button>Complete All</button>
-      <button>Clear Completed</button>
+      <span>{todos.lenght} tasks</span>
+      <button onClick={checkAllTasks}>Complete All</button>
+      <button onClick={removeAllDoneTasks}>Clear Completed</button>
     </div>
   );
 };
diff --git a/src/components/Task.jsx b/src/components/Task.jsx
index 5e1498f..06fd463 100644
--- a/src/components/Task.jsx
+++ b/src/components/Task.jsx
@@ -1,23 +1,30 @@
-import React, { useState } from "react";
+import React from "react";
+import { useNoteStore } from "../store";
+import moment from "moment";
 
-const Task = () => {
-  const [checked, setChecked] = useState(false);
+const Task = ({ todo }) => {
+  const { toggleChecked, removeTask } = useNoteStore();
 
-  const toggle = (isChecked) => {
-    //toggle
-    setChecked(isChecked);
+  const toggle = (todo) => {
+    toggleChecked(todo.text, todo.date);
   };
 
   return (
     <div>
-      <span>To Do Text</span>
+      <span>{todo.text}</span>
       <input
         type="checkbox"
-        checked={checked}
-        onChange={(event) => toggle(event.target.checked)}
+        checked={todo.checked}
+        onChange={() => toggle(todo)}
       />
-      <span>X minutes ago</span>
-      <button>Remove</button>
+      <span>{moment(todo.date).fromNow()}</span>
+      <button
+        onClick={() => {
+          removeTask(todo.text, todo.date);
+        }}
+      >
+        Remove
+      </button>
     </div>
   );
 };
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
index efcfece..ecb3a15 100644
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -1,12 +1,14 @@
 import React from "react";
 import Task from "./Task";
+import { useNoteStore } from "../store";
 
 const TaskList = () => {
+  const { todos } = useNoteStore();
   return (
     <div>
-      <Task />
-      <Task />
-      <Task />
+      {todos.map((todo) => (
+        <Task key={`${todo.date}-${todo.text}`} todo={todo} />
+      ))}
     </div>
   );
 };

From 23add45818f134a95e61dc5de2b4caf0c3a5620d Mon Sep 17 00:00:00 2001
From: Kasssiiii <kasia.gru@gmail.com>
Date: Mon, 9 Jun 2025 00:31:26 +0200
Subject: [PATCH 6/8] added persistent storage

---
 src/store.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/store.jsx b/src/store.jsx
index 100441a..4325709 100644
--- a/src/store.jsx
+++ b/src/store.jsx
@@ -1,7 +1,8 @@
 import moment from "moment";
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
-export const useNoteStore = create((set) => {
+export const useNoteStore = create( persist( (set) => {
   return {
     todos: [
       {
@@ -76,4 +77,7 @@ export const useNoteStore = create((set) => {
         return { todos: newTodos };
       }),
   };
-});
+}, {
+  name: 'todo-tasks'
+}
+));

From 1e58dddd8182ed434c904365a0ae0367b3303411 Mon Sep 17 00:00:00 2001
From: Kasssiiii <kasia.gru@gmail.com>
Date: Mon, 9 Jun 2025 00:45:02 +0200
Subject: [PATCH 7/8] adding some style

---
 index.html                   |  5 +++++
 src/App.css                  | 22 +++++++++++++++++++++
 src/App.jsx                  | 12 ++++++++----
 src/components/NewTask.css   | 10 ++++++++++
 src/components/NewTask.jsx   |  6 ++++--
 src/components/StatusBar.css | 17 +++++++++++++++++
 src/components/StatusBar.jsx | 14 ++++++++++----
 src/components/Task.css      | 33 ++++++++++++++++++++++++++++++++
 src/components/Task.jsx      | 37 +++++++++++++++++++++---------------
 src/components/TaskList.css  | 10 ++++++++++
 src/components/TaskList.jsx  |  3 ++-
 src/index.css                |  8 +++++++-
 12 files changed, 150 insertions(+), 27 deletions(-)
 create mode 100644 src/App.css
 create mode 100644 src/components/NewTask.css
 create mode 100644 src/components/StatusBar.css
 create mode 100644 src/components/Task.css
 create mode 100644 src/components/TaskList.css

diff --git a/index.html b/index.html
index f7ac4e4..fcd932a 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
+     <link rel="preconnect" href="https://fonts.googleapis.com">
+     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+     <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Handlee&family=Rampart+One&family=Sriracha&display=swap" rel="stylesheet">
+
     <title>Todo</title>
   </head>
   <body>
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..630835d
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,22 @@
+.main {
+  padding: 20px 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.innerMain {
+  border: 1px solid black;
+  width: 400px;
+}
+
+h1 {
+  color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 70px;
+  font-family: "Rampart One", sans-serif;
+  font-weight: 400;
+}
diff --git a/src/App.jsx b/src/App.jsx
index fffc248..ee7863c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,17 @@
 import NewTask from "./components/NewTask";
 import StatusBar from "./components/StatusBar";
 import TaskList from "./components/TaskList";
+import "./App.css";
 
 export const App = () => {
   return (
-    <div>
-      <NewTask />
-      <StatusBar />
-      <TaskList />
+    <div className="main">
+      <div className="innerMain">
+        <h1>ToDo App</h1>
+        <NewTask />
+        <StatusBar />
+        <TaskList />
+      </div>
     </div>
   );
 };
diff --git a/src/components/NewTask.css b/src/components/NewTask.css
new file mode 100644
index 0000000..cd02d59
--- /dev/null
+++ b/src/components/NewTask.css
@@ -0,0 +1,10 @@
+.toDoBox {
+  border: 1px solid black;
+  background-color: #eee;
+  box-shadow: 0.25rem 0.25rem rgba(12, 23, 14, 0.388);
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin: 1rem;
+  gap: 10px;
+}
diff --git a/src/components/NewTask.jsx b/src/components/NewTask.jsx
index 3b96486..34ff97c 100644
--- a/src/components/NewTask.jsx
+++ b/src/components/NewTask.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useNoteStore } from "../store";
+import "./NewTask.css";
 
 const NewTask = () => {
   const [toDo, setToDo] = useState("");
@@ -10,12 +11,13 @@ const NewTask = () => {
     if (toDo) {
       addNewTask(toDo);
     }
+    setToDo("");
   };
 
   return (
     <form className="toDoBox" onSubmit={(ev) => ev.preventDefault()}>
-      <label>Add you task!</label>
-      <textarea
+      <p>Add you task!</p>
+      <input
         className="toDoArea"
         type="text"
         value={toDo}
diff --git a/src/components/StatusBar.css b/src/components/StatusBar.css
new file mode 100644
index 0000000..4a1f91b
--- /dev/null
+++ b/src/components/StatusBar.css
@@ -0,0 +1,17 @@
+.statusBar {
+  border: 1px solid black;
+  background-color: #b9b8b4;
+  box-shadow: 0.25rem 0.25rem rgba(12, 23, 14, 0.388);
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+  margin: 1rem;
+  gap: 10px;
+  justify-content: space-around;
+}
+
+.actionButton {
+  border-radius: 5px;
+  padding: 2px;
+  background-color: #2febe5;
+}
diff --git a/src/components/StatusBar.jsx b/src/components/StatusBar.jsx
index aff7123..4abcb16 100644
--- a/src/components/StatusBar.jsx
+++ b/src/components/StatusBar.jsx
@@ -1,14 +1,20 @@
 import React from "react";
 import { useNoteStore } from "../store";
 
+import "./StatusBar.css";
+
 const StatusBar = () => {
   const { todos, checkAllTasks, removeAllDoneTasks } = useNoteStore();
 
   return (
-    <div>
-      <span>{todos.lenght} tasks</span>
-      <button onClick={checkAllTasks}>Complete All</button>
-      <button onClick={removeAllDoneTasks}>Clear Completed</button>
+    <div className="statusBar">
+      <span>{todos.length} tasks</span>
+      <button className="actionButton" onClick={checkAllTasks}>
+        Complete All
+      </button>
+      <button className="actionButton" onClick={removeAllDoneTasks}>
+        Clear Completed
+      </button>
     </div>
   );
 };
diff --git a/src/components/Task.css b/src/components/Task.css
new file mode 100644
index 0000000..f5569e8
--- /dev/null
+++ b/src/components/Task.css
@@ -0,0 +1,33 @@
+.taskBox {
+  border: 1px solid black;
+  background-color: #74cd07;
+  box-shadow: 0.25rem 0.25rem rgba(12, 23, 14, 0.388);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: space-around;
+}
+
+.taskDone {
+  background-color: #c5c3c1;
+}
+
+.taskDetails {
+  background-color: rgba(112, 82, 41, 0.363);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.taskMain {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.1rem 0.2rem;
+}
+
+.removeButton {
+  border-radius: 5px;
+  padding: 2px;
+  background-color: #b0d790;
+}
diff --git a/src/components/Task.jsx b/src/components/Task.jsx
index 06fd463..c8bae85 100644
--- a/src/components/Task.jsx
+++ b/src/components/Task.jsx
@@ -2,6 +2,8 @@ import React from "react";
 import { useNoteStore } from "../store";
 import moment from "moment";
 
+import "./Task.css";
+
 const Task = ({ todo }) => {
   const { toggleChecked, removeTask } = useNoteStore();
 
@@ -10,21 +12,26 @@ const Task = ({ todo }) => {
   };
 
   return (
-    <div>
-      <span>{todo.text}</span>
-      <input
-        type="checkbox"
-        checked={todo.checked}
-        onChange={() => toggle(todo)}
-      />
-      <span>{moment(todo.date).fromNow()}</span>
-      <button
-        onClick={() => {
-          removeTask(todo.text, todo.date);
-        }}
-      >
-        Remove
-      </button>
+    <div className={todo.checked ? "taskBox taskDone" : "taskBox"}>
+      <div className="taskMain">
+        <span>{todo.text}</span>
+        <input
+          type="checkbox"
+          checked={todo.checked}
+          onChange={() => toggle(todo)}
+        />
+      </div>
+      <div className="taskDetails">
+        <span>{moment(todo.date).fromNow()}</span>
+        <button
+          className="removeButton"
+          onClick={() => {
+            removeTask(todo.text, todo.date);
+          }}
+        >
+          Remove
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/TaskList.css b/src/components/TaskList.css
new file mode 100644
index 0000000..4f8eab8
--- /dev/null
+++ b/src/components/TaskList.css
@@ -0,0 +1,10 @@
+.taskList {
+  border: 1px solid black;
+  background-color: #f1daa9;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin: 1rem;
+  gap: 10px;
+  justify-content: space-around;
+}
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
index ecb3a15..dbebea1 100644
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -1,11 +1,12 @@
 import React from "react";
 import Task from "./Task";
 import { useNoteStore } from "../store";
+import "./TaskList.css";
 
 const TaskList = () => {
   const { todos } = useNoteStore();
   return (
-    <div>
+    <div className="taskList">
       {todos.map((todo) => (
         <Task key={`${todo.date}-${todo.text}`} todo={todo} />
       ))}
diff --git a/src/index.css b/src/index.css
index f7c0aef..11430b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,9 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Handlee", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }

From 108b943fd305e4d28bfece3d7993fbf9a6ed73d6 Mon Sep 17 00:00:00 2001
From: Kasssiii <kasia.gru@gmail.com>
Date: Sun, 17 Aug 2025 18:01:04 +0200
Subject: [PATCH 8/8] fix accessibility errors

---
 src/components/NewTask.jsx |  3 ++-
 src/components/Task.jsx    | 12 +++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/NewTask.jsx b/src/components/NewTask.jsx
index 34ff97c..df4eef4 100644
--- a/src/components/NewTask.jsx
+++ b/src/components/NewTask.jsx
@@ -16,9 +16,10 @@ const NewTask = () => {
 
   return (
     <form className="toDoBox" onSubmit={(ev) => ev.preventDefault()}>
-      <p>Add you task!</p>
+      <label htmlFor="toDoArea">Add your task!</label>
       <input
         className="toDoArea"
+        id="toDoArea"
         type="text"
         value={toDo}
         onChange={(ev) => setToDo(ev.target.value)}
diff --git a/src/components/Task.jsx b/src/components/Task.jsx
index c8bae85..07e86b9 100644
--- a/src/components/Task.jsx
+++ b/src/components/Task.jsx
@@ -15,11 +15,13 @@ const Task = ({ todo }) => {
     <div className={todo.checked ? "taskBox taskDone" : "taskBox"}>
       <div className="taskMain">
         <span>{todo.text}</span>
-        <input
-          type="checkbox"
-          checked={todo.checked}
-          onChange={() => toggle(todo)}
-        />
+        <label>Done
+          <input
+            type="checkbox"
+            checked={todo.checked}
+            onChange={() => toggle(todo)}
+          />
+        </label>
       </div>
       <div className="taskDetails">
         <span>{moment(todo.date).fromNow()}</span>