From 6a83ba997cd1c5706128515569417d48b9b082eb Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Wed, 21 May 2025 13:54:18 +0200
Subject: [PATCH 01/28] setting up my app and creating the first store

---
 package.json                |  3 ++-
 public/vite.svg             |  1 -
 src/App.jsx                 | 11 ++++++++---
 src/components/ToDoForm.jsx | 19 +++++++++++++++++++
 src/stores/useTodoStore.jsx |  8 ++++++++
 5 files changed, 37 insertions(+), 5 deletions(-)
 delete mode 100644 public/vite.svg
 create mode 100644 src/components/ToDoForm.jsx
 create mode 100644 src/stores/useTodoStore.jsx

diff --git a/package.json b/package.json
index caf6289..669c1e7 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 5427540..b1455c1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,10 @@
+import ToDoForm from "./components/ToDoForm";
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
-  )
-}
+    <>
+      <h1>My To Do List</h1>
+      <ToDoForm />
+    </>
+  );
+};
diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
new file mode 100644
index 0000000..5e5fa74
--- /dev/null
+++ b/src/components/ToDoForm.jsx
@@ -0,0 +1,19 @@
+import useTodoStore from "../stores/useTodoStore";
+
+const ToDoForm = () => {
+  const { todo, setTodo } = useTodoStore;
+
+  return (
+    <form>
+      <h2>What do you need to do?</h2>
+      <input
+        type="text"
+        onChange={(e) => setTodo(e.target.value)}
+        value={todo}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+export default ToDoForm;
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
new file mode 100644
index 0000000..558f2e6
--- /dev/null
+++ b/src/stores/useTodoStore.jsx
@@ -0,0 +1,8 @@
+import { create } from "zustand";
+
+const useTodoStore = create((set) => ({
+  todo: "",
+  setTodo: () => set((state) => ({ todo: state.todo })),
+}));
+
+export default useTodoStore;

From 1255d8fda49a0ad5c6b19d4e7fd6bae4466dc2be Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Wed, 21 May 2025 14:33:10 +0200
Subject: [PATCH 02/28] getting the todo store to create and delete todos

---
 src/App.jsx                    |  2 ++
 src/components/ToDoForm.jsx    | 16 ++++++++++++----
 src/components/ToDoMessage.jsx | 20 ++++++++++++++++++++
 src/components/TodoList.jsx    | 20 ++++++++++++++++++++
 src/stores/useTodoStore.jsx    | 29 +++++++++++++++++++++++++++--
 5 files changed, 81 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ToDoMessage.jsx
 create mode 100644 src/components/TodoList.jsx

diff --git a/src/App.jsx b/src/App.jsx
index b1455c1..e99ea5a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,12 @@
 import ToDoForm from "./components/ToDoForm";
+import TodoList from "./components/TodoList";
 
 export const App = () => {
   return (
     <>
       <h1>My To Do List</h1>
       <ToDoForm />
+      <TodoList />
     </>
   );
 };
diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index 5e5fa74..1d2b00c 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -1,15 +1,23 @@
+import { useState } from "react";
 import useTodoStore from "../stores/useTodoStore";
 
 const ToDoForm = () => {
-  const { todo, setTodo } = useTodoStore;
+  const [message, setMessage] = useState("");
+  const createTodo = useTodoStore((state) => state.createTodo);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    createTodo(message);
+    setMessage("");
+  };
 
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       <h2>What do you need to do?</h2>
       <input
         type="text"
-        onChange={(e) => setTodo(e.target.value)}
-        value={todo}
+        onChange={(e) => setMessage(e.target.value)}
+        value={message}
       />
       <button type="submit">Submit</button>
     </form>
diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
new file mode 100644
index 0000000..8f59cea
--- /dev/null
+++ b/src/components/ToDoMessage.jsx
@@ -0,0 +1,20 @@
+import useTodoStore from "../stores/useTodoStore";
+
+const ToDoMessage = ({ id, message, complete }) => {
+  const removeTodo = useTodoStore((state) => state.removeTodo);
+
+  return (
+    <div>
+      <p>{message}</p>
+      <button onClick={() => removeTodo(id)}>Delete</button>
+      <button>{complete ? "Click to uncomplete" : "Click to complete"}</button>
+      <p>
+        {complete
+          ? "This task has been completed"
+          : "This task has not been completed"}
+      </p>
+    </div>
+  );
+};
+
+export default ToDoMessage;
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
new file mode 100644
index 0000000..89dbec9
--- /dev/null
+++ b/src/components/TodoList.jsx
@@ -0,0 +1,20 @@
+import useTodoStore from "../stores/useTodoStore";
+import ToDoMessage from "./ToDoMessage";
+
+const TodoList = () => {
+  const todos = useTodoStore((state) => state.todos);
+
+  if (todos.length === 0) {
+    return <p>No tasks yet. Be the first!</p>;
+  } else {
+    return (
+      <>
+        {todos.map((todo) => (
+          <ToDoMessage key={todo.id} {...todo} />
+        ))}
+      </>
+    );
+  }
+};
+
+export default TodoList;
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
index 558f2e6..9c10347 100644
--- a/src/stores/useTodoStore.jsx
+++ b/src/stores/useTodoStore.jsx
@@ -1,8 +1,33 @@
 import { create } from "zustand";
 
+const initialState = {
+  todos: [
+    {
+      id: 1,
+      message: "",
+      complete: false,
+    },
+  ],
+};
+
 const useTodoStore = create((set) => ({
-  todo: "",
-  setTodo: () => set((state) => ({ todo: state.todo })),
+  ...initialState,
+
+  createTodo: (message) => {
+    const newTodo = {
+      id: Date.now(),
+      message,
+      complete: false,
+    };
+
+    set((state) => ({ todos: [newTodo, ...state.todos] }));
+  },
+
+  removeTodo: (id) => {
+    set((state) => ({
+      todos: state.todos.filter((todo) => todo.id !== id),
+    }));
+  },
 }));
 
 export default useTodoStore;

From 7f76e746d47e9475c7810c26539a940b20afffe8 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Wed, 21 May 2025 14:51:31 +0200
Subject: [PATCH 03/28] creating the complete / uncomplete task functionality

---
 src/components/ToDoMessage.jsx |  8 +++++++-
 src/components/TodoList.jsx    | 20 +++++++++-----------
 src/stores/useTodoStore.jsx    | 25 +++++++++++++++++--------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index 8f59cea..a2a309d 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -2,12 +2,18 @@ import useTodoStore from "../stores/useTodoStore";
 
 const ToDoMessage = ({ id, message, complete }) => {
   const removeTodo = useTodoStore((state) => state.removeTodo);
+  const completeTodo = useTodoStore((state) => state.completeTodo);
+  const uncompleteTodo = useTodoStore((state) => state.uncompleteTodo);
 
   return (
     <div>
       <p>{message}</p>
       <button onClick={() => removeTodo(id)}>Delete</button>
-      <button>{complete ? "Click to uncomplete" : "Click to complete"}</button>
+      <button
+        onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
+      >
+        {complete ? "Click to uncomplete" : "Click to complete"}
+      </button>
       <p>
         {complete
           ? "This task has been completed"
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 89dbec9..0ff46c5 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -4,17 +4,15 @@ import ToDoMessage from "./ToDoMessage";
 const TodoList = () => {
   const todos = useTodoStore((state) => state.todos);
 
-  if (todos.length === 0) {
-    return <p>No tasks yet. Be the first!</p>;
-  } else {
-    return (
-      <>
-        {todos.map((todo) => (
-          <ToDoMessage key={todo.id} {...todo} />
-        ))}
-      </>
-    );
-  }
+  if (todos.length === 0) return <p>No tasks yet. Be the first!</p>;
+
+  return (
+    <>
+      {todos.map((todo) => (
+        <ToDoMessage key={todo.id} {...todo} />
+      ))}
+    </>
+  );
 };
 
 export default TodoList;
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
index 9c10347..3a22a2c 100644
--- a/src/stores/useTodoStore.jsx
+++ b/src/stores/useTodoStore.jsx
@@ -1,13 +1,7 @@
 import { create } from "zustand";
 
 const initialState = {
-  todos: [
-    {
-      id: 1,
-      message: "",
-      complete: false,
-    },
-  ],
+  todos: [],
 };
 
 const useTodoStore = create((set) => ({
@@ -19,7 +13,6 @@ const useTodoStore = create((set) => ({
       message,
       complete: false,
     };
-
     set((state) => ({ todos: [newTodo, ...state.todos] }));
   },
 
@@ -28,6 +21,22 @@ const useTodoStore = create((set) => ({
       todos: state.todos.filter((todo) => todo.id !== id),
     }));
   },
+
+  completeTodo: (id) => {
+    set((state) => ({
+      todos: state.todos.map((todo) =>
+        todo.id === id ? { ...todo, complete: true } : todo
+      ),
+    }));
+  },
+
+  uncompleteTodo: (id) => {
+    set((state) => ({
+      todos: state.todos.map((todo) =>
+        todo.id === id ? { ...todo, complete: false } : todo
+      ),
+    }));
+  },
 }));
 
 export default useTodoStore;

From 229f78d56dbd66c9bee9710ba804d6e43c8637d3 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Wed, 21 May 2025 15:10:09 +0200
Subject: [PATCH 04/28] showing a count of all and uncompleted tasks

---
 src/components/TodoList.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 0ff46c5..98a5adf 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -8,6 +8,11 @@ const TodoList = () => {
 
   return (
     <>
+      <p>All tasks: {todos.length}</p>
+      <p>
+        Uncompleted tasks:{" "}
+        {todos.filter((todo) => todo.complete === false).length}
+      </p>
       {todos.map((todo) => (
         <ToDoMessage key={todo.id} {...todo} />
       ))}

From 17cdd571792d1ab88920fb9e51b31fae2a8c853d Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Wed, 21 May 2025 15:13:56 +0200
Subject: [PATCH 05/28] chenging text for emty state, will need styling to look
 nice later

---
 src/components/ToDoForm.jsx | 2 +-
 src/components/TodoList.jsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index 1d2b00c..6e367c5 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -19,7 +19,7 @@ const ToDoForm = () => {
         onChange={(e) => setMessage(e.target.value)}
         value={message}
       />
-      <button type="submit">Submit</button>
+      <button type="submit">Add my to-do</button>
     </form>
   );
 };
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 98a5adf..5e8cb70 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -4,7 +4,8 @@ import ToDoMessage from "./ToDoMessage";
 const TodoList = () => {
   const todos = useTodoStore((state) => state.todos);
 
-  if (todos.length === 0) return <p>No tasks yet. Be the first!</p>;
+  if (todos.length === 0)
+    return <p>You have no tasks yet. Add a to-do to get started!</p>;
 
   return (
     <>

From c77bef72cac6aceb6320b2fb38ca428cc0e5cc44 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Thu, 22 May 2025 12:39:44 +0200
Subject: [PATCH 06/28] adding a category selection that is then displayed on
 my to-do

---
 src/components/ToDoForm.jsx    | 50 +++++++++++++++++++++++++++++++++-
 src/components/ToDoMessage.jsx |  3 +-
 src/stores/useTodoStore.jsx    |  3 +-
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index 6e367c5..3369ed2 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -3,12 +3,14 @@ import useTodoStore from "../stores/useTodoStore";
 
 const ToDoForm = () => {
   const [message, setMessage] = useState("");
+  const [category, setCategory] = useState("");
   const createTodo = useTodoStore((state) => state.createTodo);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    createTodo(message);
+    createTodo(message, category);
     setMessage("");
+    setCategory("");
   };
 
   return (
@@ -17,8 +19,54 @@ const ToDoForm = () => {
       <input
         type="text"
         onChange={(e) => setMessage(e.target.value)}
+        required
         value={message}
       />
+      <h3>Select task category:</h3>
+      <label>
+        <input
+          type="radio"
+          name="category"
+          value="Work"
+          checked={category === "Work"}
+          onChange={(e) => setCategory(e.target.value)}
+          required
+        />{" "}
+        Work
+      </label>
+      <label>
+        <input
+          type="radio"
+          name="category"
+          value="Study"
+          checked={category === "Study"}
+          onChange={(e) => setCategory(e.target.value)}
+          required
+        />{" "}
+        Study
+      </label>
+      <label>
+        <input
+          type="radio"
+          name="category"
+          value="Chores"
+          checked={category === "Chores"}
+          onChange={(e) => setCategory(e.target.value)}
+          required
+        />{" "}
+        Chores
+      </label>
+      <label>
+        <input
+          type="radio"
+          name="category"
+          value="Misc"
+          checked={category === "Misc"}
+          onChange={(e) => setCategory(e.target.value)}
+          required
+        />{" "}
+        Misc
+      </label>
       <button type="submit">Add my to-do</button>
     </form>
   );
diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index a2a309d..202c461 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -1,6 +1,6 @@
 import useTodoStore from "../stores/useTodoStore";
 
-const ToDoMessage = ({ id, message, complete }) => {
+const ToDoMessage = ({ id, message, complete, category }) => {
   const removeTodo = useTodoStore((state) => state.removeTodo);
   const completeTodo = useTodoStore((state) => state.completeTodo);
   const uncompleteTodo = useTodoStore((state) => state.uncompleteTodo);
@@ -8,6 +8,7 @@ const ToDoMessage = ({ id, message, complete }) => {
   return (
     <div>
       <p>{message}</p>
+      <p>{category}</p>
       <button onClick={() => removeTodo(id)}>Delete</button>
       <button
         onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
index 3a22a2c..b54eda0 100644
--- a/src/stores/useTodoStore.jsx
+++ b/src/stores/useTodoStore.jsx
@@ -7,11 +7,12 @@ const initialState = {
 const useTodoStore = create((set) => ({
   ...initialState,
 
-  createTodo: (message) => {
+  createTodo: (message, category) => {
     const newTodo = {
       id: Date.now(),
       message,
       complete: false,
+      category,
     };
     set((state) => ({ todos: [newTodo, ...state.todos] }));
   },

From 88b4403be1629f61eb923a71efaad467d9c89164 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Thu, 22 May 2025 15:20:22 +0200
Subject: [PATCH 07/28] some structuring and basic design

---
 index.html                     |   6 +-
 package.json                   |   2 +
 src/App.jsx                    |   6 +-
 src/components/ToDoForm.jsx    | 105 ++++++++++++++++++---------------
 src/components/ToDoMessage.jsx |  28 ++++++---
 src/components/TodoList.jsx    |  16 ++---
 src/index.css                  |   2 +
 vite.config.js                 |  10 ++--
 8 files changed, 101 insertions(+), 74 deletions(-)

diff --git a/index.html b/index.html
index f7ac4e4..a3709ae 100644
--- a/index.html
+++ b/index.html
@@ -3,14 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <link href="/src/styles.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Todo</title>
   </head>
   <body>
     <div id="root"></div>
-    <script
-      type="module"
-      src="./src/main.jsx">
-    </script>
+    <script type="module" src="./src/main.jsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 669c1e7..fbde171 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.7",
     "zustand": "^5.0.4"
   },
   "devDependencies": {
diff --git a/src/App.jsx b/src/App.jsx
index e99ea5a..e6a5e81 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,10 +3,10 @@ import TodoList from "./components/TodoList";
 
 export const App = () => {
   return (
-    <>
-      <h1>My To Do List</h1>
+    <div className="flex items-center min-h-screen flex-col gap-8 p-8">
+      <h1 className="text-4xl">My To-Do List</h1>
       <ToDoForm />
       <TodoList />
-    </>
+    </div>
   );
 };
diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index 3369ed2..1fe5aa0 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -14,60 +14,71 @@ const ToDoForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <h2>What do you need to do?</h2>
+    <form
+      className="border border-solid border-black rounded-sm p-4 flex flex-col gap-4 min-w-sm"
+      onSubmit={handleSubmit}
+    >
+      <h2 className="text-lg">What do you need to do?</h2>
       <input
         type="text"
         onChange={(e) => setMessage(e.target.value)}
         required
         value={message}
+        className="border border-solid border-gray h-10"
       />
       <h3>Select task category:</h3>
-      <label>
-        <input
-          type="radio"
-          name="category"
-          value="Work"
-          checked={category === "Work"}
-          onChange={(e) => setCategory(e.target.value)}
-          required
-        />{" "}
-        Work
-      </label>
-      <label>
-        <input
-          type="radio"
-          name="category"
-          value="Study"
-          checked={category === "Study"}
-          onChange={(e) => setCategory(e.target.value)}
-          required
-        />{" "}
-        Study
-      </label>
-      <label>
-        <input
-          type="radio"
-          name="category"
-          value="Chores"
-          checked={category === "Chores"}
-          onChange={(e) => setCategory(e.target.value)}
-          required
-        />{" "}
-        Chores
-      </label>
-      <label>
-        <input
-          type="radio"
-          name="category"
-          value="Misc"
-          checked={category === "Misc"}
-          onChange={(e) => setCategory(e.target.value)}
-          required
-        />{" "}
-        Misc
-      </label>
-      <button type="submit">Add my to-do</button>
+      <div className="p-2 flex flex-col gap-2">
+        <label>
+          <input
+            type="radio"
+            name="category"
+            value="Work"
+            checked={category === "Work"}
+            onChange={(e) => setCategory(e.target.value)}
+            required
+          />{" "}
+          Work
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="category"
+            value="Study"
+            checked={category === "Study"}
+            onChange={(e) => setCategory(e.target.value)}
+            required
+          />{" "}
+          Study
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="category"
+            value="Chores"
+            checked={category === "Chores"}
+            onChange={(e) => setCategory(e.target.value)}
+            required
+          />{" "}
+          Chores
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="category"
+            value="Misc"
+            checked={category === "Misc"}
+            onChange={(e) => setCategory(e.target.value)}
+            required
+          />{" "}
+          Misc
+        </label>
+      </div>
+      <button
+        className="border border-solid border-black rounded-md cursor-pointer"
+        type="submit"
+      >
+        Add my to-do
+      </button>
     </form>
   );
 };
diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index 202c461..d477d95 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -6,15 +6,25 @@ const ToDoMessage = ({ id, message, complete, category }) => {
   const uncompleteTodo = useTodoStore((state) => state.uncompleteTodo);
 
   return (
-    <div>
-      <p>{message}</p>
-      <p>{category}</p>
-      <button onClick={() => removeTodo(id)}>Delete</button>
-      <button
-        onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
-      >
-        {complete ? "Click to uncomplete" : "Click to complete"}
-      </button>
+    <div className="border border-solid border-black rounded-sm flex flex-col gap-6 p-4 min-w-sm">
+      <p className="text-lg mb-6">{message}</p>
+      <div className="bg-black text-white max-w-20 flex items-center justify-center rounded-lg p-1 text-sm">
+        <p>{category}</p>
+      </div>
+      <div className="flex flex-row gap-4">
+        <button
+          className="border border-solid border-black rounded-md cursor-pointer p-2"
+          onClick={() => removeTodo(id)}
+        >
+          Delete
+        </button>
+        <button
+          className="border border-solid border-black rounded-md cursor-pointer p-2"
+          onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
+        >
+          {complete ? "Click to uncomplete" : "Click to complete"}
+        </button>
+      </div>
       <p>
         {complete
           ? "This task has been completed"
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 5e8cb70..1d92d39 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -8,16 +8,18 @@ const TodoList = () => {
     return <p>You have no tasks yet. Add a to-do to get started!</p>;
 
   return (
-    <>
-      <p>All tasks: {todos.length}</p>
-      <p>
-        Uncompleted tasks:{" "}
-        {todos.filter((todo) => todo.complete === false).length}
-      </p>
+    <div className="flex items-center flex-col gap-10 min-w-sm">
+      <div className="flex items-center flex-row gap-2">
+        <p>All tasks: {todos.length}</p>
+        <p>
+          Uncompleted tasks:{" "}
+          {todos.filter((todo) => todo.complete === false).length}
+        </p>
+      </div>
       {todos.map((todo) => (
         <ToDoMessage key={todo.id} {...todo} />
       ))}
-    </>
+    </div>
   );
 };
 
diff --git a/src/index.css b/src/index.css
index f7c0aef..293c9bc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
diff --git a/vite.config.js b/vite.config.js
index ba24244..282fc60 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,9 @@
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react(), tailwindcss()],
+});

From faf870822e250f851c79ec1f692f560911edf1b1 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Thu, 22 May 2025 15:29:38 +0200
Subject: [PATCH 08/28] adding a task filter

---
 src/components/TodoList.jsx | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 1d92d39..0b1e3b3 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -1,8 +1,16 @@
+import { useState } from "react";
 import useTodoStore from "../stores/useTodoStore";
 import ToDoMessage from "./ToDoMessage";
 
 const TodoList = () => {
   const todos = useTodoStore((state) => state.todos);
+  const [filter, setFilter] = useState("all");
+
+  const filteredTodos = todos.filter((todo) => {
+    if (filter === "completed") return todo.complete;
+    if (filter === "uncompleted") return !todo.complete;
+    return true;
+  });
 
   if (todos.length === 0)
     return <p>You have no tasks yet. Add a to-do to get started!</p>;
@@ -16,7 +24,30 @@ const TodoList = () => {
           {todos.filter((todo) => todo.complete === false).length}
         </p>
       </div>
-      {todos.map((todo) => (
+      <div className="flex flex-col gap-2">
+        <p>Filter tasks by:</p>
+        <div className="flex gap-2">
+          <button
+            className="border border-solid border-black rounded-md cursor-pointer p-2"
+            onClick={() => setFilter("all")}
+          >
+            All
+          </button>
+          <button
+            className="border border-solid border-black rounded-md cursor-pointer p-2"
+            onClick={() => setFilter("completed")}
+          >
+            Completed
+          </button>
+          <button
+            className="border border-solid border-black rounded-md cursor-pointer p-2"
+            onClick={() => setFilter("uncompleted")}
+          >
+            Uncompleted
+          </button>
+        </div>
+      </div>
+      {filteredTodos.map((todo) => (
         <ToDoMessage key={todo.id} {...todo} />
       ))}
     </div>

From 9255a3ed2e148dfe29163d80d936ebfac3d6cd99 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Thu, 22 May 2025 15:32:39 +0200
Subject: [PATCH 09/28] simple spacing

---
 src/components/TodoList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 0b1e3b3..c350d73 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -17,7 +17,7 @@ const TodoList = () => {
 
   return (
     <div className="flex items-center flex-col gap-10 min-w-sm">
-      <div className="flex items-center flex-row gap-2">
+      <div className="flex flex-row gap-8">
         <p>All tasks: {todos.length}</p>
         <p>
           Uncompleted tasks:{" "}

From c0d3d810ef6e07efc1d269a8de7e9efcae679141 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Thu, 22 May 2025 15:45:13 +0200
Subject: [PATCH 10/28] styling complete and uncomplete

---
 index.html                     |  8 ++++++++
 src/components/ToDoForm.jsx    |  2 +-
 src/components/ToDoMessage.jsx | 14 +++++++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index a3709ae..29f8a09 100644
--- a/index.html
+++ b/index.html
@@ -10,5 +10,13 @@
   <body>
     <div id="root"></div>
     <script type="module" src="./src/main.jsx"></script>
+    <script
+      type="module"
+      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
+    ></script>
   </body>
 </html>
diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index 1fe5aa0..a33a15f 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -26,7 +26,7 @@ const ToDoForm = () => {
         value={message}
         className="border border-solid border-gray h-10"
       />
-      <h3>Select task category:</h3>
+      <h3>Task category:</h3>
       <div className="p-2 flex flex-col gap-2">
         <label>
           <input
diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index d477d95..8d44386 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -25,11 +25,15 @@ const ToDoMessage = ({ id, message, complete, category }) => {
           {complete ? "Click to uncomplete" : "Click to complete"}
         </button>
       </div>
-      <p>
-        {complete
-          ? "This task has been completed"
-          : "This task has not been completed"}
-      </p>
+      <div className="text-md flex flex-row items-center gap-2">
+        <p>Complete?</p>
+
+        {complete ? (
+          <ion-icon name="checkmark-circle-outline"></ion-icon>
+        ) : (
+          <ion-icon name="close-circle-outline"></ion-icon>
+        )}
+      </div>
     </div>
   );
 };

From eba56829754f8dacabab71e91f0e9fc94bda7a1c Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Thu, 22 May 2025 15:46:50 +0200
Subject: [PATCH 11/28] reorganising the message structure

---
 src/components/ToDoMessage.jsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index 8d44386..aed919e 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -11,6 +11,15 @@ const ToDoMessage = ({ id, message, complete, category }) => {
       <div className="bg-black text-white max-w-20 flex items-center justify-center rounded-lg p-1 text-sm">
         <p>{category}</p>
       </div>
+      <div className="text-md flex flex-row items-center gap-2">
+        <p>Complete?</p>
+
+        {complete ? (
+          <ion-icon name="checkmark-circle-outline"></ion-icon>
+        ) : (
+          <ion-icon name="close-circle-outline"></ion-icon>
+        )}
+      </div>
       <div className="flex flex-row gap-4">
         <button
           className="border border-solid border-black rounded-md cursor-pointer p-2"
@@ -25,15 +34,6 @@ const ToDoMessage = ({ id, message, complete, category }) => {
           {complete ? "Click to uncomplete" : "Click to complete"}
         </button>
       </div>
-      <div className="text-md flex flex-row items-center gap-2">
-        <p>Complete?</p>
-
-        {complete ? (
-          <ion-icon name="checkmark-circle-outline"></ion-icon>
-        ) : (
-          <ion-icon name="close-circle-outline"></ion-icon>
-        )}
-      </div>
     </div>
   );
 };

From 4f70713723d9b3fe219d487ca1566488de18879d Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 09:27:10 +0200
Subject: [PATCH 12/28] styling what shows on the page when there are no tasks

---
 src/components/ToDoMessage.jsx |  2 +-
 src/components/TodoList.jsx    | 36 +++++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index aed919e..6dcaff4 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -31,7 +31,7 @@ const ToDoMessage = ({ id, message, complete, category }) => {
           className="border border-solid border-black rounded-md cursor-pointer p-2"
           onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
         >
-          {complete ? "Click to uncomplete" : "Click to complete"}
+          {complete ? "Mark as incomplete" : "Mark as complete"}
         </button>
       </div>
     </div>
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index c350d73..a486495 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -13,7 +13,41 @@ const TodoList = () => {
   });
 
   if (todos.length === 0)
-    return <p>You have no tasks yet. Add a to-do to get started!</p>;
+    return (
+      <div className="flex items-center flex-col gap-10 min-w-sm">
+        <div className="flex flex-row gap-8">
+          <p>All tasks: {todos.length}</p>
+          <p>
+            Uncompleted tasks:{" "}
+            {todos.filter((todo) => todo.complete === false).length}
+          </p>
+        </div>
+        <div className="flex flex-col gap-2">
+          <p>Filter tasks by:</p>
+          <div className="flex gap-2">
+            <button
+              className="border border-solid border-black rounded-md cursor-pointer p-2"
+              onClick={() => setFilter("all")}
+            >
+              All
+            </button>
+            <button
+              className="border border-solid border-black rounded-md cursor-pointer p-2"
+              onClick={() => setFilter("completed")}
+            >
+              Completed
+            </button>
+            <button
+              className="border border-solid border-black rounded-md cursor-pointer p-2"
+              onClick={() => setFilter("uncompleted")}
+            >
+              Uncompleted
+            </button>
+          </div>
+        </div>
+        <p>You have no tasks yet. Add a to-do to get started!</p>;
+      </div>
+    );
 
   return (
     <div className="flex items-center flex-col gap-10 min-w-sm">

From 78dde63531af11359c0409defca7ec6bc5935a5a Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 09:28:15 +0200
Subject: [PATCH 13/28] fixing grammar

---
 src/components/TodoList.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index a486495..fb8a34f 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -35,13 +35,13 @@ const TodoList = () => {
               className="border border-solid border-black rounded-md cursor-pointer p-2"
               onClick={() => setFilter("completed")}
             >
-              Completed
+              Complete
             </button>
             <button
               className="border border-solid border-black rounded-md cursor-pointer p-2"
               onClick={() => setFilter("uncompleted")}
             >
-              Uncompleted
+              Incomplete
             </button>
           </div>
         </div>
@@ -71,13 +71,13 @@ const TodoList = () => {
             className="border border-solid border-black rounded-md cursor-pointer p-2"
             onClick={() => setFilter("completed")}
           >
-            Completed
+            Complete
           </button>
           <button
             className="border border-solid border-black rounded-md cursor-pointer p-2"
             onClick={() => setFilter("uncompleted")}
           >
-            Uncompleted
+            Incomplete
           </button>
         </div>
       </div>

From 9b02d74037b2294abc6c4ba5ad70bc4fe4e634d3 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 09:38:36 +0200
Subject: [PATCH 14/28] adding the date posted on the task

---
 src/components/ToDoMessage.jsx | 1 +
 src/components/TodoList.jsx    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index 6dcaff4..50210a1 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -34,6 +34,7 @@ const ToDoMessage = ({ id, message, complete, category }) => {
           {complete ? "Mark as incomplete" : "Mark as complete"}
         </button>
       </div>
+      <p>Task added: {new Date(id).toLocaleString()}</p>
     </div>
   );
 };
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index fb8a34f..ed3106f 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -45,7 +45,7 @@ const TodoList = () => {
             </button>
           </div>
         </div>
-        <p>You have no tasks yet. Add a to-do to get started!</p>;
+        <p>You have no tasks yet. Add a to-do to get started!</p>
       </div>
     );
 

From 04e2e5183b8d856dfe026f91bc606cb9632c4ae2 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 10:21:38 +0200
Subject: [PATCH 15/28] styling and colouring stuff

---
 index.html                     |  4 ++++
 src/App.jsx                    |  2 +-
 src/components/ToDoForm.jsx    | 10 +++++++---
 src/components/ToDoMessage.jsx |  8 ++++----
 src/components/TodoList.jsx    | 16 ++++++++--------
 src/index.css                  |  2 +-
 6 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 29f8a09..d31d805 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,10 @@
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <link href="/src/styles.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
     <title>Todo</title>
   </head>
   <body>
diff --git a/src/App.jsx b/src/App.jsx
index e6a5e81..99da9db 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,7 +3,7 @@ import TodoList from "./components/TodoList";
 
 export const App = () => {
   return (
-    <div className="flex items-center min-h-screen flex-col gap-8 p-8">
+    <div className="flex items-center min-h-screen flex-col gap-8 p-8 text-blue-200 bg-gray-800">
       <h1 className="text-4xl">My To-Do List</h1>
       <ToDoForm />
       <TodoList />
diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index a33a15f..fae1c2d 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -15,7 +15,7 @@ const ToDoForm = () => {
 
   return (
     <form
-      className="border border-solid border-black rounded-sm p-4 flex flex-col gap-4 min-w-sm"
+      className="border border-solid border-blue-200 rounded-sm p-4 flex flex-col gap-4 min-w-sm"
       onSubmit={handleSubmit}
     >
       <h2 className="text-lg">What do you need to do?</h2>
@@ -24,7 +24,7 @@ const ToDoForm = () => {
         onChange={(e) => setMessage(e.target.value)}
         required
         value={message}
-        className="border border-solid border-gray h-10"
+        className="border border-gray-300 h-10 px-3 focus:border-rose-200 focus:ring-rose-300 focus:outline-none focus:ring-2 "
       />
       <h3>Task category:</h3>
       <div className="p-2 flex flex-col gap-2">
@@ -36,6 +36,7 @@ const ToDoForm = () => {
             checked={category === "Work"}
             onChange={(e) => setCategory(e.target.value)}
             required
+            className="accent-rose-300 focus:ring-2 focus:ring-rose-300"
           />{" "}
           Work
         </label>
@@ -47,6 +48,7 @@ const ToDoForm = () => {
             checked={category === "Study"}
             onChange={(e) => setCategory(e.target.value)}
             required
+            className="accent-rose-300 focus:ring-2 focus:ring-rose-300"
           />{" "}
           Study
         </label>
@@ -58,6 +60,7 @@ const ToDoForm = () => {
             checked={category === "Chores"}
             onChange={(e) => setCategory(e.target.value)}
             required
+            className="accent-rose-300 focus:ring-2 focus:ring-rose-300"
           />{" "}
           Chores
         </label>
@@ -69,12 +72,13 @@ const ToDoForm = () => {
             checked={category === "Misc"}
             onChange={(e) => setCategory(e.target.value)}
             required
+            className="appearence-none bg-gray-800 accent-rose-300 focus:ring-2 focus:ring-rose-300"
           />{" "}
           Misc
         </label>
       </div>
       <button
-        className="border border-solid border-black rounded-md cursor-pointer"
+        className="border border-solid border-blue-200 hover:bg-blue-200 hover:text-gray-800  rounded-md cursor-pointer"
         type="submit"
       >
         Add my to-do
diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index 50210a1..c0711a8 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -6,9 +6,9 @@ const ToDoMessage = ({ id, message, complete, category }) => {
   const uncompleteTodo = useTodoStore((state) => state.uncompleteTodo);
 
   return (
-    <div className="border border-solid border-black rounded-sm flex flex-col gap-6 p-4 min-w-sm">
+    <div className="border border-solid border-blue-200 rounded-sm flex flex-col gap-6 p-4 min-w-sm">
       <p className="text-lg mb-6">{message}</p>
-      <div className="bg-black text-white max-w-20 flex items-center justify-center rounded-lg p-1 text-sm">
+      <div className="bg-purple-200 text-gray-800 flex items-center justify-center rounded-lg p-1 text-sm">
         <p>{category}</p>
       </div>
       <div className="text-md flex flex-row items-center gap-2">
@@ -22,13 +22,13 @@ const ToDoMessage = ({ id, message, complete, category }) => {
       </div>
       <div className="flex flex-row gap-4">
         <button
-          className="border border-solid border-black rounded-md cursor-pointer p-2"
+          className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
           onClick={() => removeTodo(id)}
         >
           Delete
         </button>
         <button
-          className="border border-solid border-black rounded-md cursor-pointer p-2"
+          className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
           onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
         >
           {complete ? "Mark as incomplete" : "Mark as complete"}
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index ed3106f..0ebee29 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -18,7 +18,7 @@ const TodoList = () => {
         <div className="flex flex-row gap-8">
           <p>All tasks: {todos.length}</p>
           <p>
-            Uncompleted tasks:{" "}
+            Incomplete tasks:{" "}
             {todos.filter((todo) => todo.complete === false).length}
           </p>
         </div>
@@ -26,19 +26,19 @@ const TodoList = () => {
           <p>Filter tasks by:</p>
           <div className="flex gap-2">
             <button
-              className="border border-solid border-black rounded-md cursor-pointer p-2"
+              className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
               onClick={() => setFilter("all")}
             >
               All
             </button>
             <button
-              className="border border-solid border-black rounded-md cursor-pointer p-2"
+              className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
               onClick={() => setFilter("completed")}
             >
               Complete
             </button>
             <button
-              className="border border-solid border-black rounded-md cursor-pointer p-2"
+              className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
               onClick={() => setFilter("uncompleted")}
             >
               Incomplete
@@ -54,7 +54,7 @@ const TodoList = () => {
       <div className="flex flex-row gap-8">
         <p>All tasks: {todos.length}</p>
         <p>
-          Uncompleted tasks:{" "}
+          Incomplete tasks:{" "}
           {todos.filter((todo) => todo.complete === false).length}
         </p>
       </div>
@@ -62,19 +62,19 @@ const TodoList = () => {
         <p>Filter tasks by:</p>
         <div className="flex gap-2">
           <button
-            className="border border-solid border-black rounded-md cursor-pointer p-2"
+            className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
             onClick={() => setFilter("all")}
           >
             All
           </button>
           <button
-            className="border border-solid border-black rounded-md cursor-pointer p-2"
+            className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
             onClick={() => setFilter("completed")}
           >
             Complete
           </button>
           <button
-            className="border border-solid border-black rounded-md cursor-pointer p-2"
+            className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
             onClick={() => setFilter("uncompleted")}
           >
             Incomplete
diff --git a/src/index.css b/src/index.css
index 293c9bc..7a4a7b5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 @import "tailwindcss";
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Quicksand, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }

From 9bc461f6aee8c48b70eaf5257382d8764b5fa2c0 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 12:54:33 +0200
Subject: [PATCH 16/28] some styling changes

---
 src/components/ToDoMessage.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index c0711a8..b88cef2 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -7,10 +7,10 @@ const ToDoMessage = ({ id, message, complete, category }) => {
 
   return (
     <div className="border border-solid border-blue-200 rounded-sm flex flex-col gap-6 p-4 min-w-sm">
-      <p className="text-lg mb-6">{message}</p>
       <div className="bg-purple-200 text-gray-800 flex items-center justify-center rounded-lg p-1 text-sm">
         <p>{category}</p>
       </div>
+      <p className="bg-white text-gray-800 text-lg p-4 rounded-sm">{message}</p>
       <div className="text-md flex flex-row items-center gap-2">
         <p>Complete?</p>
 
@@ -23,18 +23,18 @@ const ToDoMessage = ({ id, message, complete, category }) => {
       <div className="flex flex-row gap-4">
         <button
           className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
-          onClick={() => removeTodo(id)}
+          onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
         >
-          Delete
+          {complete ? "Mark as incomplete" : "Mark as complete"}
         </button>
         <button
-          className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
-          onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
+          className="bg-blue-200 text-gray-800 border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-gray-800 hover:text-blue-200 "
+          onClick={() => removeTodo(id)}
         >
-          {complete ? "Mark as incomplete" : "Mark as complete"}
+          Delete
         </button>
       </div>
-      <p>Task added: {new Date(id).toLocaleString()}</p>
+      <p className="italic">Task added: {new Date(id).toLocaleString()}</p>
     </div>
   );
 };

From acbcbcbed57eb235fdd8983deae5055478fa4846 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:04:48 +0200
Subject: [PATCH 17/28] removing repeated code

---
 src/components/TodoList.jsx | 49 ++++++-------------------------------
 1 file changed, 7 insertions(+), 42 deletions(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 0ebee29..039e175 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -12,43 +12,6 @@ const TodoList = () => {
     return true;
   });
 
-  if (todos.length === 0)
-    return (
-      <div className="flex items-center flex-col gap-10 min-w-sm">
-        <div className="flex flex-row gap-8">
-          <p>All tasks: {todos.length}</p>
-          <p>
-            Incomplete tasks:{" "}
-            {todos.filter((todo) => todo.complete === false).length}
-          </p>
-        </div>
-        <div className="flex flex-col gap-2">
-          <p>Filter tasks by:</p>
-          <div className="flex gap-2">
-            <button
-              className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
-              onClick={() => setFilter("all")}
-            >
-              All
-            </button>
-            <button
-              className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
-              onClick={() => setFilter("completed")}
-            >
-              Complete
-            </button>
-            <button
-              className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
-              onClick={() => setFilter("uncompleted")}
-            >
-              Incomplete
-            </button>
-          </div>
-        </div>
-        <p>You have no tasks yet. Add a to-do to get started!</p>
-      </div>
-    );
-
   return (
     <div className="flex items-center flex-col gap-10 min-w-sm">
       <div className="flex flex-row gap-8">
@@ -62,13 +25,13 @@ const TodoList = () => {
         <p>Filter tasks by:</p>
         <div className="flex gap-2">
           <button
-            className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
+            className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
             onClick={() => setFilter("all")}
           >
             All
           </button>
           <button
-            className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
+            className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
             onClick={() => setFilter("completed")}
           >
             Complete
@@ -81,9 +44,11 @@ const TodoList = () => {
           </button>
         </div>
       </div>
-      {filteredTodos.map((todo) => (
-        <ToDoMessage key={todo.id} {...todo} />
-      ))}
+      {todos.length === 0 ? (
+        <p>You have no tasks yet. Add a to-do to get started!</p>
+      ) : (
+        filteredTodos.map((todo) => <ToDoMessage key={todo.id} {...todo} />)
+      )}
     </div>
   );
 };

From 41e2fc2e194f49e98a5a094fa9cd8a6ad5cd572a Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:08:44 +0200
Subject: [PATCH 18/28] adding indication of which filter we are on

---
 src/components/TodoList.jsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 039e175..4415f40 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -7,8 +7,8 @@ const TodoList = () => {
   const [filter, setFilter] = useState("all");
 
   const filteredTodos = todos.filter((todo) => {
-    if (filter === "completed") return todo.complete;
-    if (filter === "uncompleted") return !todo.complete;
+    if (filter === "complete") return todo.complete;
+    if (filter === "incomplete") return !todo.complete;
     return true;
   });
 
@@ -25,20 +25,28 @@ const TodoList = () => {
         <p>Filter tasks by:</p>
         <div className="flex gap-2">
           <button
-            className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
+            className={`border border-solid border-blue-200 rounded-md cursor-pointer p-2 hover:bg-blue-200 hover:text-gray-800 ${
+              filter === "all" ? "bg-blue-200 text-gray-800 shadow-md" : ""
+            }`}
             onClick={() => setFilter("all")}
           >
             All
           </button>
           <button
-            className="border border-solid border-blue-200  rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
-            onClick={() => setFilter("completed")}
+            className={`border border-solid border-blue-200 rounded-md cursor-pointer p-2 hover:bg-blue-200 hover:text-gray-800 ${
+              filter === "complete" ? "bg-blue-200 text-gray-800 shadow-md" : ""
+            }`}
+            onClick={() => setFilter("complete")}
           >
             Complete
           </button>
           <button
-            className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
-            onClick={() => setFilter("uncompleted")}
+            className={`border border-solid border-blue-200 rounded-md cursor-pointer p-2 hover:bg-blue-200 hover:text-gray-800 ${
+              filter === "incomplete"
+                ? "bg-blue-200 text-gray-800 shadow-md"
+                : ""
+            }`}
+            onClick={() => setFilter("incomplete")}
           >
             Incomplete
           </button>

From 2b931c29db3c522b395a0e693f3064e61acb348e Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:11:45 +0200
Subject: [PATCH 19/28] heading size change

---
 src/App.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 99da9db..512e5b2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,8 +3,8 @@ import TodoList from "./components/TodoList";
 
 export const App = () => {
   return (
-    <div className="flex items-center min-h-screen flex-col gap-8 p-8 text-blue-200 bg-gray-800">
-      <h1 className="text-4xl">My To-Do List</h1>
+    <div className="flex items-center min-h-screen flex-col gap-10 p-8 text-blue-200 bg-gray-800">
+      <h1 className="text-5xl font-bold">My To-Do List</h1>
       <ToDoForm />
       <TodoList />
     </div>

From 2e3b7323c7318d8c722b53f91672cc4ea0b1c31c Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:15:09 +0200
Subject: [PATCH 20/28] placing the to-d-s side-by side

---
 src/components/TodoList.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 4415f40..f6281c9 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -52,11 +52,13 @@ const TodoList = () => {
           </button>
         </div>
       </div>
-      {todos.length === 0 ? (
-        <p>You have no tasks yet. Add a to-do to get started!</p>
-      ) : (
-        filteredTodos.map((todo) => <ToDoMessage key={todo.id} {...todo} />)
-      )}
+      <div className="flex gap-10">
+        {todos.length === 0 ? (
+          <p>You have no tasks yet. Add a to-do to get started!</p>
+        ) : (
+          filteredTodos.map((todo) => <ToDoMessage key={todo.id} {...todo} />)
+        )}
+      </div>
     </div>
   );
 };

From f8d67bea32ae88f24436aa2e91c2ef1de6aa365d Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:33:52 +0200
Subject: [PATCH 21/28] making it repsonsive

---
 src/App.jsx                    | 10 ++++++----
 src/components/ToDoForm.jsx    |  7 ++++++-
 src/components/ToDoMessage.jsx |  9 ++++++++-
 src/components/TodoList.jsx    |  8 ++++----
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 512e5b2..0752f0c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,10 +3,12 @@ import TodoList from "./components/TodoList";
 
 export const App = () => {
   return (
-    <div className="flex items-center min-h-screen flex-col gap-10 p-8 text-blue-200 bg-gray-800">
-      <h1 className="text-5xl font-bold">My To-Do List</h1>
-      <ToDoForm />
-      <TodoList />
+    <div className="flex items-center justify-center ">
+      <div className="flex items-center min-h-screen flex-col gap-10 p-8 text-blue-200 bg-gray-800 mx-auto w-full">
+        <h1 className="text-center text-5xl font-bold">My To-Do List</h1>
+        <ToDoForm />
+        <TodoList />
+      </div>
     </div>
   );
 };
diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index fae1c2d..044556f 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -15,7 +15,12 @@ const ToDoForm = () => {
 
   return (
     <form
-      className="border border-solid border-blue-200 rounded-sm p-4 flex flex-col gap-4 min-w-sm"
+      className="
+    border border-solid border-blue-200 rounded-sm p-4
+    flex flex-col gap-4
+    w-full max-w-md
+    mx-auto
+  "
       onSubmit={handleSubmit}
     >
       <h2 className="text-lg">What do you need to do?</h2>
diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index b88cef2..a20dc37 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -6,7 +6,14 @@ const ToDoMessage = ({ id, message, complete, category }) => {
   const uncompleteTodo = useTodoStore((state) => state.uncompleteTodo);
 
   return (
-    <div className="border border-solid border-blue-200 rounded-sm flex flex-col gap-6 p-4 min-w-sm">
+    <div
+      className="
+        border border-solid border-blue-200 rounded-sm
+        flex flex-col gap-4 p-4
+        w-full max-w-md
+        mx-auto
+      "
+    >
       <div className="bg-purple-200 text-gray-800 flex items-center justify-center rounded-lg p-1 text-sm">
         <p>{category}</p>
       </div>
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index f6281c9..5a0b795 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -13,8 +13,8 @@ const TodoList = () => {
   });
 
   return (
-    <div className="flex items-center flex-col gap-10 min-w-sm">
-      <div className="flex flex-row gap-8">
+    <div className="flex items-center flex-col gap-10 w-full max-w-xl mx-auto px-4 sm:px-8">
+      <div className="flex flex-row gap-8 flex-wrap">
         <p>All tasks: {todos.length}</p>
         <p>
           Incomplete tasks:{" "}
@@ -23,7 +23,7 @@ const TodoList = () => {
       </div>
       <div className="flex flex-col gap-2">
         <p>Filter tasks by:</p>
-        <div className="flex gap-2">
+        <div className="flex gap-2 flex-wrap">
           <button
             className={`border border-solid border-blue-200 rounded-md cursor-pointer p-2 hover:bg-blue-200 hover:text-gray-800 ${
               filter === "all" ? "bg-blue-200 text-gray-800 shadow-md" : ""
@@ -52,7 +52,7 @@ const TodoList = () => {
           </button>
         </div>
       </div>
-      <div className="flex gap-10">
+      <div className="flex gap-10 flex-wrap justify-center w-full">
         {todos.length === 0 ? (
           <p>You have no tasks yet. Add a to-do to get started!</p>
         ) : (

From f2e7df51aa4d13a87a82b24397cf654d53f40839 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:43:00 +0200
Subject: [PATCH 22/28] resposnive design changes

---
 src/components/TodoList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 5a0b795..d445032 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -52,7 +52,7 @@ const TodoList = () => {
           </button>
         </div>
       </div>
-      <div className="flex gap-10 flex-wrap justify-center w-full">
+      <div className="flex gap-6 flex-wrap justify-center w-full max-w-6xl mx-auto px-4 sm:px-8">
         {todos.length === 0 ? (
           <p>You have no tasks yet. Add a to-do to get started!</p>
         ) : (

From eb260f7daaaf234e6592b1036fa3e9abe585cf2c Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:47:37 +0200
Subject: [PATCH 23/28] informative text when there's nothing to see

---
 src/components/TodoList.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index d445032..ca9d2a7 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -53,8 +53,16 @@ const TodoList = () => {
         </div>
       </div>
       <div className="flex gap-6 flex-wrap justify-center w-full max-w-6xl mx-auto px-4 sm:px-8">
-        {todos.length === 0 ? (
-          <p>You have no tasks yet. Add a to-do to get started!</p>
+        {filteredTodos.length === 0 ? (
+          filter === "complete" ? (
+            <p>No completed tasks yet. Complete a task to see it here.</p>
+          ) : filter === "incomplete" ? (
+            <p>
+              No incomplete tasks yet. Add a task or uncheck a completed one.
+            </p>
+          ) : (
+            <p>You have no tasks yet. Add a to-do to get started!</p>
+          )
         ) : (
           filteredTodos.map((todo) => <ToDoMessage key={todo.id} {...todo} />)
         )}

From 7ec8ad4e72ed5c9edd69b4a2487923d58479922a Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 13:56:00 +0200
Subject: [PATCH 24/28] adding an empty ui state

---
 src/components/TodoList.jsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index ca9d2a7..cf6ccc6 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -55,13 +55,31 @@ const TodoList = () => {
       <div className="flex gap-6 flex-wrap justify-center w-full max-w-6xl mx-auto px-4 sm:px-8">
         {filteredTodos.length === 0 ? (
           filter === "complete" ? (
-            <p>No completed tasks yet. Complete a task to see it here.</p>
+            <div className="flex flex-col items-center gap-6">
+              <ion-icon
+                style={{ fontSize: "5rem" }}
+                name="document-outline"
+              ></ion-icon>
+              <p>No completed tasks yet. Complete a task to see it here.</p>
+            </div>
           ) : filter === "incomplete" ? (
-            <p>
-              No incomplete tasks yet. Add a task or uncheck a completed one.
-            </p>
+            <div className="flex flex-col items-center text-center gap-6">
+              <ion-icon
+                style={{ fontSize: "5rem" }}
+                name="document-outline"
+              ></ion-icon>
+              <p>
+                No incomplete tasks yet. Add a task or uncheck a completed one.
+              </p>{" "}
+            </div>
           ) : (
-            <p>You have no tasks yet. Add a to-do to get started!</p>
+            <div className="flex flex-col items-center gap-6">
+              <ion-icon
+                style={{ fontSize: "5rem" }}
+                name="document-outline"
+              ></ion-icon>
+              <p>You have no tasks yet. Add a to-do to get started!</p>{" "}
+            </div>
           )
         ) : (
           filteredTodos.map((todo) => <ToDoMessage key={todo.id} {...todo} />)

From 6eaa56c7357f20b94ecf719d02c5f59f6f68c0b0 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Fri, 23 May 2025 14:11:40 +0200
Subject: [PATCH 25/28] accessibility with aria-labels

---
 src/components/ToDoForm.jsx    | 2 ++
 src/components/ToDoMessage.jsx | 9 +++++++--
 src/components/TodoList.jsx    | 6 ++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/ToDoForm.jsx b/src/components/ToDoForm.jsx
index 044556f..ee6a2c0 100644
--- a/src/components/ToDoForm.jsx
+++ b/src/components/ToDoForm.jsx
@@ -25,6 +25,7 @@ const ToDoForm = () => {
     >
       <h2 className="text-lg">What do you need to do?</h2>
       <input
+        aria-label="Task name"
         type="text"
         onChange={(e) => setMessage(e.target.value)}
         required
@@ -83,6 +84,7 @@ const ToDoForm = () => {
         </label>
       </div>
       <button
+        aria-label="Add task"
         className="border border-solid border-blue-200 hover:bg-blue-200 hover:text-gray-800  rounded-md cursor-pointer"
         type="submit"
       >
diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index a20dc37..6b84311 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -22,19 +22,24 @@ const ToDoMessage = ({ id, message, complete, category }) => {
         <p>Complete?</p>
 
         {complete ? (
-          <ion-icon name="checkmark-circle-outline"></ion-icon>
+          <ion-icon
+            aria-hidden="true"
+            name="checkmark-circle-outline"
+          ></ion-icon>
         ) : (
-          <ion-icon name="close-circle-outline"></ion-icon>
+          <ion-icon aria-hidden="true" name="close-circle-outline"></ion-icon>
         )}
       </div>
       <div className="flex flex-row gap-4">
         <button
+          aria-label="Mark task as complete or incomplete"
           className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
           onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
         >
           {complete ? "Mark as incomplete" : "Mark as complete"}
         </button>
         <button
+          aria-label="Delete task"
           className="bg-blue-200 text-gray-800 border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-gray-800 hover:text-blue-200 "
           onClick={() => removeTodo(id)}
         >
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index cf6ccc6..af63396 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -25,6 +25,7 @@ const TodoList = () => {
         <p>Filter tasks by:</p>
         <div className="flex gap-2 flex-wrap">
           <button
+            aria-label="Show all tasks"
             className={`border border-solid border-blue-200 rounded-md cursor-pointer p-2 hover:bg-blue-200 hover:text-gray-800 ${
               filter === "all" ? "bg-blue-200 text-gray-800 shadow-md" : ""
             }`}
@@ -33,6 +34,7 @@ const TodoList = () => {
             All
           </button>
           <button
+            aria-label="Show complete tasks"
             className={`border border-solid border-blue-200 rounded-md cursor-pointer p-2 hover:bg-blue-200 hover:text-gray-800 ${
               filter === "complete" ? "bg-blue-200 text-gray-800 shadow-md" : ""
             }`}
@@ -41,6 +43,7 @@ const TodoList = () => {
             Complete
           </button>
           <button
+            aria-label="Show incomplete tasks"
             className={`border border-solid border-blue-200 rounded-md cursor-pointer p-2 hover:bg-blue-200 hover:text-gray-800 ${
               filter === "incomplete"
                 ? "bg-blue-200 text-gray-800 shadow-md"
@@ -57,6 +60,7 @@ const TodoList = () => {
           filter === "complete" ? (
             <div className="flex flex-col items-center gap-6">
               <ion-icon
+                aria-hidden="true"
                 style={{ fontSize: "5rem" }}
                 name="document-outline"
               ></ion-icon>
@@ -65,6 +69,7 @@ const TodoList = () => {
           ) : filter === "incomplete" ? (
             <div className="flex flex-col items-center text-center gap-6">
               <ion-icon
+                aria-hidden="true"
                 style={{ fontSize: "5rem" }}
                 name="document-outline"
               ></ion-icon>
@@ -75,6 +80,7 @@ const TodoList = () => {
           ) : (
             <div className="flex flex-col items-center gap-6">
               <ion-icon
+                aria-hidden="true"
                 style={{ fontSize: "5rem" }}
                 name="document-outline"
               ></ion-icon>

From d76841b9395633acbe146b42aa369b937a86799a Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Sat, 24 May 2025 14:59:49 +0200
Subject: [PATCH 26/28] styling a bit more

---
 src/App.jsx                    |  3 ++-
 src/components/TaskCounter.jsx | 31 +++++++++++++++++++++++++++++++
 src/components/TodoList.jsx    |  9 ++-------
 3 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 src/components/TaskCounter.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 0752f0c..869f13b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,8 @@ export const App = () => {
   return (
     <div className="flex items-center justify-center ">
       <div className="flex items-center min-h-screen flex-col gap-10 p-8 text-blue-200 bg-gray-800 mx-auto w-full">
-        <h1 className="text-center text-5xl font-bold">My To-Do List</h1>
+        <h1 className="text-center text-6xl font-bold">Todoodle</h1>
+        <h2 className="text-center text-xl font-bold">My To-Do List</h2>
         <ToDoForm />
         <TodoList />
       </div>
diff --git a/src/components/TaskCounter.jsx b/src/components/TaskCounter.jsx
new file mode 100644
index 0000000..26eb0e8
--- /dev/null
+++ b/src/components/TaskCounter.jsx
@@ -0,0 +1,31 @@
+import useTodoStore from "../stores/useTodoStore";
+
+const TaskCounter = () => {
+  const todos = useTodoStore((state) => state.todos);
+
+  return (
+    <div className="flex flex-col gap-8 flex-wrap">
+      <h3 className="text-lg">Your progress:</h3>
+      <div className="flex flex-row gap-2">
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+        <p>All tasks: {todos.length}</p>
+      </div>
+      <div className="flex flex-row gap-2">
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+        <p>
+          Tasks completed:{" "}
+          {todos.filter((todo) => todo.complete === true).length}{" "}
+        </p>
+      </div>
+      <div className="flex flex-row gap-2">
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+        <p>
+          Tasks remaining:{" "}
+          {todos.filter((todo) => todo.complete === false).length}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default TaskCounter;
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index af63396..e3cea21 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import useTodoStore from "../stores/useTodoStore";
 import ToDoMessage from "./ToDoMessage";
+import TaskCounter from "./TaskCounter";
 
 const TodoList = () => {
   const todos = useTodoStore((state) => state.todos);
@@ -14,13 +15,7 @@ const TodoList = () => {
 
   return (
     <div className="flex items-center flex-col gap-10 w-full max-w-xl mx-auto px-4 sm:px-8">
-      <div className="flex flex-row gap-8 flex-wrap">
-        <p>All tasks: {todos.length}</p>
-        <p>
-          Incomplete tasks:{" "}
-          {todos.filter((todo) => todo.complete === false).length}
-        </p>
-      </div>
+      <TaskCounter />
       <div className="flex flex-col gap-2">
         <p>Filter tasks by:</p>
         <div className="flex gap-2 flex-wrap">

From 0323a44d5cf9ff21ea1189d2f7ba0cbdfd296750 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Mon, 2 Jun 2025 09:06:35 +0200
Subject: [PATCH 27/28] making complete/incomplete a toggle instead

---
 src/components/ToDoMessage.jsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index 6b84311..fe9f107 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -17,7 +17,17 @@ const ToDoMessage = ({ id, message, complete, category }) => {
       <div className="bg-purple-200 text-gray-800 flex items-center justify-center rounded-lg p-1 text-sm">
         <p>{category}</p>
       </div>
-      <p className="bg-white text-gray-800 text-lg p-4 rounded-sm">{message}</p>
+
+      <p
+        className={`text-lg p-4 rounded-sm border border-gray-100 ${
+          complete
+            ? "line-through text-gray-400 bg-gray-100 italic"
+            : "text-gray-800 bg-gray-50"
+        }`}
+      >
+        {message}
+      </p>
+
       <div className="text-md flex flex-row items-center gap-2">
         <p>Complete?</p>
 
@@ -30,14 +40,16 @@ const ToDoMessage = ({ id, message, complete, category }) => {
           <ion-icon aria-hidden="true" name="close-circle-outline"></ion-icon>
         )}
       </div>
+
       <div className="flex flex-row gap-4">
         <button
           aria-label="Mark task as complete or incomplete"
           className="border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-blue-200 hover:text-gray-800 "
           onClick={complete ? () => uncompleteTodo(id) : () => completeTodo(id)}
         >
-          {complete ? "Mark as incomplete" : "Mark as complete"}
+          Toggle Task
         </button>
+
         <button
           aria-label="Delete task"
           className="bg-blue-200 text-gray-800 border border-solid border-blue-200 rounded-md cursor-pointer p-2  hover:bg-gray-800 hover:text-blue-200 "

From 448354fcf634635e5ff56ea89efcb0d34d65b165 Mon Sep 17 00:00:00 2001
From: christina-baldwin <christina.baldwin13@yahoo.com>
Date: Mon, 2 Jun 2025 09:08:45 +0200
Subject: [PATCH 28/28] adding word break

---
 src/components/ToDoMessage.jsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ToDoMessage.jsx b/src/components/ToDoMessage.jsx
index fe9f107..8b8fa75 100644
--- a/src/components/ToDoMessage.jsx
+++ b/src/components/ToDoMessage.jsx
@@ -19,11 +19,12 @@ const ToDoMessage = ({ id, message, complete, category }) => {
       </div>
 
       <p
-        className={`text-lg p-4 rounded-sm border border-gray-100 ${
-          complete
-            ? "line-through text-gray-400 bg-gray-100 italic"
-            : "text-gray-800 bg-gray-50"
-        }`}
+        className={`text-lg p-4 rounded-sm border border-gray-100 break-words
+ ${
+   complete
+     ? "line-through text-gray-400 bg-gray-100 italic"
+     : "text-gray-800 bg-gray-50"
+ }`}
       >
         {message}
       </p>