From 614e53c92624b1c3bf2dd4f762a44b5476e254c6 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 12:45:09 -0500
Subject: [PATCH 01/36] Create Todos component to be reused 4 times branch
 feat/todo

---
 src/todo/Todo.jsx  | 11 +++++++++++
 src/todo/Todos.jsx | 20 ++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/todo/Todos.jsx

diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 37032b1..2e8aac8 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -1,9 +1,20 @@
+import { Todos } from './Todos.jsx'
 import './Todo.css'
 
 export const Todo = () => {
   return (
     <div className='Todo'>
       <h1>Todo</h1>
+      <Todos title="Daily Goals" completed={100} todos={[1, 2, 3]} dones={[4, 5, 6]} />
+      <Todos title="Weekly Goals" completed={50} todos={[1, 2, 3]} dones={[4, 5, 6]} />
+      <Todos title="Monthly Goals" completed={0} todos={[1, 2, 3]} dones={[4, 5, 6]} />
+      <Todos
+        title="Completed Tasks"
+        completedText="Worked Hours"
+        completed={0.25} dones={[1, 2, 3]}
+        deleteBtnText="Delete All Tasks"
+        inputText="Type a completed task and press Enter"
+      />
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
new file mode 100644
index 0000000..c3a7eb8
--- /dev/null
+++ b/src/todo/Todos.jsx
@@ -0,0 +1,20 @@
+export const Todos = ({ title, completedText, deleteBtnText, inputText }) => {
+  return (
+    <div className='Todos'>
+      <header>
+        <span>{completedText? completedText : "Completed"}:<span>16</span>{completedText? "h" : "%"}</span>
+        <h1>{title}</h1>
+      </header>
+      <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+      </ul>
+      <footer>
+        <button>{deleteBtnText? deleteBtnText : "Delete Completed Goals"}</button>
+        <input type="text" defaultValue={inputText? inputText : "Type a new goal and press Enter"} />
+      </footer>
+
+    </div>
+  )
+}
\ No newline at end of file

From c7a786f5d79f431635ef6858e0f86d1d3d57a7a1 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 13:05:51 -0500
Subject: [PATCH 02/36] Add minimal style to Todo & Todos components branch
 feat/todo

---
 src/App.css        |  4 ++++
 src/todo/Todo.css  |  4 +++-
 src/todo/Todos.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 src/todo/Todos.jsx |  5 +++--
 4 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/todo/Todos.css

diff --git a/src/App.css b/src/App.css
index 13fd414..10c8f77 100644
--- a/src/App.css
+++ b/src/App.css
@@ -8,6 +8,10 @@ button {
   display: none;
 }
 
+li {
+  list-style: none;
+}
+
 .App {
   width: 98vw;
   height: 95vh;
diff --git a/src/todo/Todo.css b/src/todo/Todo.css
index 384512c..026ef75 100644
--- a/src/todo/Todo.css
+++ b/src/todo/Todo.css
@@ -1,3 +1,5 @@
 .Todo {
-  color: white;
+  display: flex;
+  row-gap: 22px;
+  overflow-y: auto;
 }
diff --git a/src/todo/Todos.css b/src/todo/Todos.css
new file mode 100644
index 0000000..45843d0
--- /dev/null
+++ b/src/todo/Todos.css
@@ -0,0 +1,44 @@
+.Todos {
+  width: 100%;
+  border: 1px solid red;
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+}
+
+.Todos header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.Todos header span span {
+  font-size: 24px;
+}
+
+.Todos header h1 {
+  font-size: 22px;
+}
+
+.Todos ul {
+  width: 95%;
+  align-self: flex-end;
+  font-size: 12px;
+}
+
+.Todos footer {
+  display: flex;
+  column-gap: 12px;
+}
+
+.Todos footer button {
+  width: fit-content;
+  font-size: 16px;
+  text-wrap: nowrap;
+}
+
+.Todos footer input {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index c3a7eb8..254682f 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -1,8 +1,10 @@
+import './Todos.css'
+
 export const Todos = ({ title, completedText, deleteBtnText, inputText }) => {
   return (
     <div className='Todos'>
       <header>
-        <span>{completedText? completedText : "Completed"}:<span>16</span>{completedText? "h" : "%"}</span>
+        <span>{completedText? completedText : "Completed"}: <span>16{completedText? "h" : "%"}</span></span>
         <h1>{title}</h1>
       </header>
       <ul>
@@ -14,7 +16,6 @@ export const Todos = ({ title, completedText, deleteBtnText, inputText }) => {
         <button>{deleteBtnText? deleteBtnText : "Delete Completed Goals"}</button>
         <input type="text" defaultValue={inputText? inputText : "Type a new goal and press Enter"} />
       </footer>
-
     </div>
   )
 }
\ No newline at end of file

From ae4f5179e03177ea28042ec6dc98ecfb3dd817aa Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 13:24:48 -0500
Subject: [PATCH 03/36] Create todoDailySlice and Render todos array branch
 feat/todo

---
 src/store/store.js | 17 +++++++++++++----
 src/todo/Todo.jsx  | 10 ++++++----
 src/todo/Todos.jsx | 20 +++++++++++++-------
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index 0882c40..0d06ed8 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,18 +1,27 @@
 import { create } from "zustand"
 import { devtools } from "zustand/middleware"
 
-const createBearSlice = set => ({
+const bearSlice = set => ({
   amount: 42,
   add: () => set(state => ({
     bears: { ...state.bears, amount: state.bears.amount + 1 }
   }))
 })
 
-const createCowSlice = () => ({
+const cowSlice = () => ({
   amount: 21
 })
 
+const todoDailySlice = set => ({
+  todos: [1, 2, 3],
+  dones: [4, 5, 6],
+  addTodo: ()=>set(state => ({
+    todoDaily: {...state.todoDaily, todos: state.todos.push(23)}
+  }))
+})
+
 export const Store = create(devtools(set => ({
-  bears: createBearSlice(set),
-  cows: createCowSlice()
+  bears: bearSlice(set),
+  cows: cowSlice(),
+  todoDaily: todoDailySlice(),
 })))
\ No newline at end of file
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 2e8aac8..f980e19 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -1,17 +1,19 @@
+import { Store } from '../store/store.js'
 import { Todos } from './Todos.jsx'
 import './Todo.css'
 
 export const Todo = () => {
+  const store = Store()
   return (
     <div className='Todo'>
       <h1>Todo</h1>
-      <Todos title="Daily Goals" completed={100} todos={[1, 2, 3]} dones={[4, 5, 6]} />
-      <Todos title="Weekly Goals" completed={50} todos={[1, 2, 3]} dones={[4, 5, 6]} />
-      <Todos title="Monthly Goals" completed={0} todos={[1, 2, 3]} dones={[4, 5, 6]} />
+      <Todos title="Daily Goals" completed={100} todos={store.todoDaily.todos} dones={[4, 5, 6]} />
+      <Todos title="Weekly Goals" completed={50} todos={["1, 2, 3"]} dones={["4, 5, 6"]} />
+      <Todos title="Monthly Goals" completed={0} todos={["1, 2, 3"]} dones={["4, 5, 6"]} />
       <Todos
         title="Completed Tasks"
         completedText="Worked Hours"
-        completed={0.25} dones={[1, 2, 3]}
+        completed={0.25} dones={["1, 2, 3"]}
         deleteBtnText="Delete All Tasks"
         inputText="Type a completed task and press Enter"
       />
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index 254682f..3fda1db 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -1,20 +1,26 @@
 import './Todos.css'
 
-export const Todos = ({ title, completedText, deleteBtnText, inputText }) => {
+export const Todos = ({ title, completedText, todos, dones, deleteBtnText, inputText }) => {
+  if (!todos) {
+    todos = []
+  }
+  let todosAndDones = todos.concat(dones)
+
+
   return (
     <div className='Todos'>
       <header>
-        <span>{completedText? completedText : "Completed"}: <span>16{completedText? "h" : "%"}</span></span>
+        <span>{completedText ? completedText : "Completed"}: <span>16{completedText ? "h" : "%"}</span></span>
         <h1>{title}</h1>
       </header>
       <ul>
-        <li>1</li>
-        <li>2</li>
-        <li>3</li>
+        {todosAndDones.map(item => (
+          <li>{item}</li>
+        ))}
       </ul>
       <footer>
-        <button>{deleteBtnText? deleteBtnText : "Delete Completed Goals"}</button>
-        <input type="text" defaultValue={inputText? inputText : "Type a new goal and press Enter"} />
+        <button>{deleteBtnText ? deleteBtnText : "Delete Completed Goals"}</button>
+        <input type="text" defaultValue={inputText ? inputText : "Type a new goal and press Enter"} />
       </footer>
     </div>
   )

From 59bcfaeed2e73b336d13b9bff1aeb90711abbb72 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 18:38:26 -0500
Subject: [PATCH 04/36] Store all data for each Todo component in the Zustand
 store branch feat/todo

---
 src/store/store.js | 25 ++++++++++++++++++++++---
 src/todo/Todo.jsx  | 12 ++----------
 src/todo/Todos.jsx | 23 ++++++++++-------------
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index 0d06ed8..bf3cb03 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -13,15 +13,34 @@ const cowSlice = () => ({
 })
 
 const todoDailySlice = set => ({
+  title: "Daily Goals",
+  achievedText: "Completed: ",
+  completed: "23%",
+  deleteBtnText: "Delete All Completed",
+  inputText: "Type a new goal and press Enter",
   todos: [1, 2, 3],
   dones: [4, 5, 6],
-  addTodo: ()=>set(state => ({
-    todoDaily: {...state.todoDaily, todos: state.todos.push(23)}
+  addTodo: () => set(state => ({
+    daily: { ...state.daily, todos: state.todos.push(23) }
+  }))
+})
+
+const taskSlice = set => ({
+  title: "Completed Tasks",
+  achievedText: "Worked Hours: ",
+  completed: 5.25,
+  deleteBtnText: "Delete All Tasks",
+  inputText: "Type a completed task and press Enter",
+  todos: [],
+  dones: [4, 5, 6],
+  addTodo: () => set(state => ({
+    completed: { ...state.tasks, todos: state.todos.push(23) }
   }))
 })
 
 export const Store = create(devtools(set => ({
   bears: bearSlice(set),
   cows: cowSlice(),
-  todoDaily: todoDailySlice(),
+  daily: todoDailySlice(),
+  tasks: taskSlice()
 })))
\ No newline at end of file
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index f980e19..a2daeae 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -7,16 +7,8 @@ export const Todo = () => {
   return (
     <div className='Todo'>
       <h1>Todo</h1>
-      <Todos title="Daily Goals" completed={100} todos={store.todoDaily.todos} dones={[4, 5, 6]} />
-      <Todos title="Weekly Goals" completed={50} todos={["1, 2, 3"]} dones={["4, 5, 6"]} />
-      <Todos title="Monthly Goals" completed={0} todos={["1, 2, 3"]} dones={["4, 5, 6"]} />
-      <Todos
-        title="Completed Tasks"
-        completedText="Worked Hours"
-        completed={0.25} dones={["1, 2, 3"]}
-        deleteBtnText="Delete All Tasks"
-        inputText="Type a completed task and press Enter"
-      />
+      <Todos store={store.daily} />
+      <Todos store={store.tasks} />
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index 3fda1db..fbd97fa 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -1,26 +1,23 @@
 import './Todos.css'
 
-export const Todos = ({ title, completedText, todos, dones, deleteBtnText, inputText }) => {
-  if (!todos) {
-    todos = []
-  }
-  let todosAndDones = todos.concat(dones)
+export const Todos = ({ store }) => {
+  const todosDones = store.todos.concat(store.dones)
 
 
   return (
     <div className='Todos'>
       <header>
-        <span>{completedText ? completedText : "Completed"}: <span>16{completedText ? "h" : "%"}</span></span>
-        <h1>{title}</h1>
+        <span>{store.achievedText}<span>{store.completed}</span></span>
+        <h1>{store.title}</h1>
       </header>
-      <ul>
-        {todosAndDones.map(item => (
-          <li>{item}</li>
-        ))}
+      <ul>{todosDones.map(item => (
+        <li>{item}</li>
+      ))
+      }
       </ul>
       <footer>
-        <button>{deleteBtnText ? deleteBtnText : "Delete Completed Goals"}</button>
-        <input type="text" defaultValue={inputText ? inputText : "Type a new goal and press Enter"} />
+        <button>{store.deleteBtnText}</button>
+        <input type="text" defaultValue={store.inputText} />
       </footer>
     </div>
   )

From 9990befe778df6d7e32e7f726d72441d2f334c2c Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 18:47:05 -0500
Subject: [PATCH 05/36] Change names between Todos.jsx and Todo.jsx

---
 src/App.jsx        |  5 ++---
 src/todo/Todo.jsx  | 22 ++++++++++++++--------
 src/todo/Todos.jsx | 26 ++++++++------------------
 3 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index da03b43..f0a4322 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,4 @@
-// import { Store } from './store/store.js'
-import {Todo} from './todo/Todo.jsx'
+import {Todos} from './todo/Todos.jsx'
 import {Doing} from './doing/Doing.jsx'
 import {Done} from './done/Done.jsx'
 import './App.css'
@@ -12,7 +11,7 @@ export const App = () => {
       <div>Bears: {store.bears.amount}</div>
       <div>Cows: {store.cows.amount}</div>
       <button onClick={()=>store.bears.add()}>Add bear</button> */}
-      <Todo />
+      <Todos />
       <Doing />
       <Done />
     </div>
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index a2daeae..1ac3695 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -1,14 +1,20 @@
-import { Store } from '../store/store.js'
-import { Todos } from './Todos.jsx'
 import './Todo.css'
 
-export const Todo = () => {
-  const store = Store()
+export const Todo = ({ store }) => {
+  const todosDones = store.todos.concat(store.dones)
   return (
-    <div className='Todo'>
-      <h1>Todo</h1>
-      <Todos store={store.daily} />
-      <Todos store={store.tasks} />
+    <div className='Todos'>
+      <header>
+        <span>{store.achievedText}<span>{store.completed}</span></span>
+        <h1>{store.title}</h1>
+      </header>
+      <ul>
+        {todosDones.map(item => (<li>{item}</li>))}
+      </ul>
+      <footer>
+        <button>{store.deleteBtnText}</button>
+        <input type="text" defaultValue={store.inputText} />
+      </footer>
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index fbd97fa..3b43211 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -1,24 +1,14 @@
+import { Store } from '../store/store.js'
+import { Todo } from './Todo.jsx'
 import './Todos.css'
 
-export const Todos = ({ store }) => {
-  const todosDones = store.todos.concat(store.dones)
-
-
+export const Todos = () => {
+  const store = Store()
   return (
-    <div className='Todos'>
-      <header>
-        <span>{store.achievedText}<span>{store.completed}</span></span>
-        <h1>{store.title}</h1>
-      </header>
-      <ul>{todosDones.map(item => (
-        <li>{item}</li>
-      ))
-      }
-      </ul>
-      <footer>
-        <button>{store.deleteBtnText}</button>
-        <input type="text" defaultValue={store.inputText} />
-      </footer>
+    <div className='Todo'>
+      <h1>Todo</h1>
+      <Todo store={store.daily} />
+      <Todo store={store.tasks} />
     </div>
   )
 }
\ No newline at end of file

From 3cc7de35ee0d949757dd690efda28c2c8d2e956a Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 19:22:03 -0500
Subject: [PATCH 06/36] Add an item to the todos or dones array in Store branch
 feat/todo

---
 src/store/store.js | 12 ++++++------
 src/todo/Todo.jsx  | 20 ++++++++++++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index bf3cb03..494b69b 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -20,8 +20,8 @@ const todoDailySlice = set => ({
   inputText: "Type a new goal and press Enter",
   todos: [1, 2, 3],
   dones: [4, 5, 6],
-  addTodo: () => set(state => ({
-    daily: { ...state.daily, todos: state.todos.push(23) }
+  add: (input) => set(state => ({
+    daily: { ...state.daily, todos: [...state.daily.todos, input] }
   }))
 })
 
@@ -33,14 +33,14 @@ const taskSlice = set => ({
   inputText: "Type a completed task and press Enter",
   todos: [],
   dones: [4, 5, 6],
-  addTodo: () => set(state => ({
-    completed: { ...state.tasks, todos: state.todos.push(23) }
+  add: (input) => set(state => ({
+    tasks: { ...state.tasks, dones: [...state.tasks.dones, input] }
   }))
 })
 
 export const Store = create(devtools(set => ({
   bears: bearSlice(set),
   cows: cowSlice(),
-  daily: todoDailySlice(),
-  tasks: taskSlice()
+  daily: todoDailySlice(set),
+  tasks: taskSlice(set)
 })))
\ No newline at end of file
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 1ac3695..1dc4be5 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -1,7 +1,17 @@
+import { useState } from 'react'
 import './Todo.css'
 
 export const Todo = ({ store }) => {
   const todosDones = store.todos.concat(store.dones)
+  const [input, setInput] = useState("")
+
+  const handleInputEnterKey = (k) => {
+    if (k.key === "Enter") {
+      store.add(input)
+      setInput("")
+    }
+  }
+
   return (
     <div className='Todos'>
       <header>
@@ -9,11 +19,17 @@ export const Todo = ({ store }) => {
         <h1>{store.title}</h1>
       </header>
       <ul>
-        {todosDones.map(item => (<li>{item}</li>))}
+        {todosDones.map(item => (<li key={item}>{item}</li>))}
       </ul>
       <footer>
         <button>{store.deleteBtnText}</button>
-        <input type="text" defaultValue={store.inputText} />
+        <input
+          type="text"
+          value={input}
+          placeholder={store.inputText}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(k) => handleInputEnterKey(k)}
+        />
       </footer>
     </div>
   )

From 1c44eae5b33d1646838849ae84d9d0e13d22cbe7 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 19:30:41 -0500
Subject: [PATCH 07/36] Remove commented code branch feat/todo

---
 src/App.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index f0a4322..1f17638 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,13 +4,8 @@ import {Done} from './done/Done.jsx'
 import './App.css'
 
 export const App = () => {
-  // const store = Store()
   return (
     <div className='App'>
-      {/* <h1>App Component</h1>
-      <div>Bears: {store.bears.amount}</div>
-      <div>Cows: {store.cows.amount}</div>
-      <button onClick={()=>store.bears.add()}>Add bear</button> */}
       <Todos />
       <Doing />
       <Done />

From 6fdd521ce276bc07e23d154a1021d9184ea22d02 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 19:31:02 -0500
Subject: [PATCH 08/36] Remove completed Tasks component from Daily, Weekly,
 Monthly components group branch feat/todo

---
 src/store/store.js | 32 +-------------------------------
 src/todo/Todo.jsx  |  6 +++---
 src/todo/Todos.jsx |  1 -
 3 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index 494b69b..6c8acb4 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,23 +1,9 @@
 import { create } from "zustand"
 import { devtools } from "zustand/middleware"
 
-const bearSlice = set => ({
-  amount: 42,
-  add: () => set(state => ({
-    bears: { ...state.bears, amount: state.bears.amount + 1 }
-  }))
-})
-
-const cowSlice = () => ({
-  amount: 21
-})
-
 const todoDailySlice = set => ({
   title: "Daily Goals",
-  achievedText: "Completed: ",
   completed: "23%",
-  deleteBtnText: "Delete All Completed",
-  inputText: "Type a new goal and press Enter",
   todos: [1, 2, 3],
   dones: [4, 5, 6],
   add: (input) => set(state => ({
@@ -25,22 +11,6 @@ const todoDailySlice = set => ({
   }))
 })
 
-const taskSlice = set => ({
-  title: "Completed Tasks",
-  achievedText: "Worked Hours: ",
-  completed: 5.25,
-  deleteBtnText: "Delete All Tasks",
-  inputText: "Type a completed task and press Enter",
-  todos: [],
-  dones: [4, 5, 6],
-  add: (input) => set(state => ({
-    tasks: { ...state.tasks, dones: [...state.tasks.dones, input] }
-  }))
-})
-
 export const Store = create(devtools(set => ({
-  bears: bearSlice(set),
-  cows: cowSlice(),
-  daily: todoDailySlice(set),
-  tasks: taskSlice(set)
+  daily: todoDailySlice(set)
 })))
\ No newline at end of file
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 1dc4be5..9e5a505 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -15,18 +15,18 @@ export const Todo = ({ store }) => {
   return (
     <div className='Todos'>
       <header>
-        <span>{store.achievedText}<span>{store.completed}</span></span>
+        <span>Completed: <span>{store.completed}</span></span>
         <h1>{store.title}</h1>
       </header>
       <ul>
         {todosDones.map(item => (<li key={item}>{item}</li>))}
       </ul>
       <footer>
-        <button>{store.deleteBtnText}</button>
+        <button>Delete All Completed</button>
         <input
           type="text"
           value={input}
-          placeholder={store.inputText}
+          placeholder="Type a goal and press Enter"
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={(k) => handleInputEnterKey(k)}
         />
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index 3b43211..9659f14 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -8,7 +8,6 @@ export const Todos = () => {
     <div className='Todo'>
       <h1>Todo</h1>
       <Todo store={store.daily} />
-      <Todo store={store.tasks} />
     </div>
   )
 }
\ No newline at end of file

From 9b512607d59f30d4624303b3496ad27a534e14c6 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 20:07:24 -0500
Subject: [PATCH 09/36] Separate logic from store.js to improve readability
 branch feat/todo

---
 src/store/store.js      | 10 +++++-----
 src/store/todo_logic.js |  7 +++++++
 src/todo/Todo.jsx       |  5 ++---
 3 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 src/store/todo_logic.js

diff --git a/src/store/store.js b/src/store/store.js
index 6c8acb4..9cd1669 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,14 +1,14 @@
 import { create } from "zustand"
 import { devtools } from "zustand/middleware"
+import { add } from "./todo_logic.js"
 
 const todoDailySlice = set => ({
   title: "Daily Goals",
   completed: "23%",
-  todos: [1, 2, 3],
-  dones: [4, 5, 6],
-  add: (input) => set(state => ({
-    daily: { ...state.daily, todos: [...state.daily.todos, input] }
-  }))
+  todos: [],
+  dones: [],
+  add: (input) => add(set, input),
+  markAsCompleted: (item) => set(state=>({}))
 })
 
 export const Store = create(devtools(set => ({
diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
new file mode 100644
index 0000000..40e4647
--- /dev/null
+++ b/src/store/todo_logic.js
@@ -0,0 +1,7 @@
+export const add = (set, input) => set((state) => ({
+  daily: {
+    ...state.daily,
+    todos: [...state.daily.todos, { id: Date.now(), content: input }]
+  }
+}))
+
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 9e5a505..988ee2a 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import './Todo.css'
 
 export const Todo = ({ store }) => {
-  const todosDones = store.todos.concat(store.dones)
   const [input, setInput] = useState("")
 
   const handleInputEnterKey = (k) => {
@@ -11,7 +10,7 @@ export const Todo = ({ store }) => {
       setInput("")
     }
   }
-
+  
   return (
     <div className='Todos'>
       <header>
@@ -19,7 +18,7 @@ export const Todo = ({ store }) => {
         <h1>{store.title}</h1>
       </header>
       <ul>
-        {todosDones.map(item => (<li key={item}>{item}</li>))}
+        {store.todos.map(item => (<li key={item.id} onClick={() => markAsCompleted(item)}>{item.content}</li>))}
       </ul>
       <footer>
         <button>Delete All Completed</button>

From eb8b93340d8f763cdbbf6dd94f214c25e6d5064a Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 20:26:15 -0500
Subject: [PATCH 10/36] Remove an item from Daily todos when clicking on it
 branch feat/todo

---
 src/store/store.js      |  4 ++--
 src/store/todo_logic.js | 11 +++++++++++
 src/todo/Todo.jsx       |  4 ++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index 9cd1669..fd68d32 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,6 +1,6 @@
 import { create } from "zustand"
 import { devtools } from "zustand/middleware"
-import { add } from "./todo_logic.js"
+import { add, markAsDone } from "./todo_logic.js"
 
 const todoDailySlice = set => ({
   title: "Daily Goals",
@@ -8,7 +8,7 @@ const todoDailySlice = set => ({
   todos: [],
   dones: [],
   add: (input) => add(set, input),
-  markAsCompleted: (item) => set(state=>({}))
+  markAsDone: (item) => markAsDone(set, item)
 })
 
 export const Store = create(devtools(set => ({
diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index 40e4647..b726b0c 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -5,3 +5,14 @@ export const add = (set, input) => set((state) => ({
   }
 }))
 
+export const markAsDone = (set, item) => set((state) => {
+  const updatedArray = state.daily.todos.filter(i => i.id !== item.id)
+  return ({
+    daily: {
+      ...state.daily,
+      todos: updatedArray
+    }
+  })
+})
+
+
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 988ee2a..7ea84ed 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -10,7 +10,7 @@ export const Todo = ({ store }) => {
       setInput("")
     }
   }
-  
+
   return (
     <div className='Todos'>
       <header>
@@ -18,7 +18,7 @@ export const Todo = ({ store }) => {
         <h1>{store.title}</h1>
       </header>
       <ul>
-        {store.todos.map(item => (<li key={item.id} onClick={() => markAsCompleted(item)}>{item.content}</li>))}
+        {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item)}>{item.content}</li>))}
       </ul>
       <footer>
         <button>Delete All Completed</button>

From 3d389c4954efe7da18009880f7adf3491fd320b3 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 21:42:46 -0500
Subject: [PATCH 11/36] Push removed completed todo into dones array branch
 feat/todo

---
 src/store/todo_logic.js | 3 ++-
 src/todo/Todo.jsx       | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index b726b0c..b1e8fc7 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -10,7 +10,8 @@ export const markAsDone = (set, item) => set((state) => {
   return ({
     daily: {
       ...state.daily,
-      todos: updatedArray
+      todos: updatedArray,
+      dones: [...state.daily.dones, item]
     }
   })
 })
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 7ea84ed..4b96501 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -19,6 +19,7 @@ export const Todo = ({ store }) => {
       </header>
       <ul>
         {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item)}>{item.content}</li>))}
+        {store.dones.map(item => (<li className='dones' key={item.id}>{item.content}</li>))}
       </ul>
       <footer>
         <button>Delete All Completed</button>

From 8ca494ac340b150113e9a8520fdab56e0a8573e4 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 21:50:58 -0500
Subject: [PATCH 12/36] Change the text color of completed or done items branch
 feat/todo

---
 src/todo/Todo.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/todo/Todo.css b/src/todo/Todo.css
index 026ef75..d2b187d 100644
--- a/src/todo/Todo.css
+++ b/src/todo/Todo.css
@@ -3,3 +3,7 @@
   row-gap: 22px;
   overflow-y: auto;
 }
+
+.Todo .dones {
+  color: rgb(101, 101, 101);
+}
\ No newline at end of file

From 9b2001f33bc738789db9d369ada1893dfc322a7e Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 21:51:39 -0500
Subject: [PATCH 13/36] Mark an item as todo in daily todo array branch
 feat/todo

---
 src/store/store.js      |  5 +++--
 src/store/todo_logic.js | 11 ++++++++++-
 src/todo/Todo.jsx       |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index fd68d32..e9002b7 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,6 +1,6 @@
 import { create } from "zustand"
 import { devtools } from "zustand/middleware"
-import { add, markAsDone } from "./todo_logic.js"
+import { add, markAsDone, markAsTodo } from "./todo_logic.js"
 
 const todoDailySlice = set => ({
   title: "Daily Goals",
@@ -8,7 +8,8 @@ const todoDailySlice = set => ({
   todos: [],
   dones: [],
   add: (input) => add(set, input),
-  markAsDone: (item) => markAsDone(set, item)
+  markAsDone: (item) => markAsDone(set, item),
+  markAsTodo: (item) => markAsTodo(set, item)
 })
 
 export const Store = create(devtools(set => ({
diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index b1e8fc7..1f73af5 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -16,4 +16,13 @@ export const markAsDone = (set, item) => set((state) => {
   })
 })
 
-
+export const markAsTodo = (set, item) => set((state) => {
+  const updatedArray = state.daily.dones.filter(i => i.id !== item.id)
+  return ({
+    daily: {
+      ...state.daily,
+      todos: [...state.daily.todos, item],
+      dones: updatedArray
+    }
+  })
+})
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 4b96501..1b10982 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -19,7 +19,7 @@ export const Todo = ({ store }) => {
       </header>
       <ul>
         {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item)}>{item.content}</li>))}
-        {store.dones.map(item => (<li className='dones' key={item.id}>{item.content}</li>))}
+        {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item)} key={item.id}>{item.content}</li>))}
       </ul>
       <footer>
         <button>Delete All Completed</button>

From 5c883126470f170befd8594ee3193f783c042ee5 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Mon, 12 Aug 2024 22:04:26 -0500
Subject: [PATCH 14/36] Sort todos and dones arrays by its id branch feat/todo

---
 src/store/todo_logic.js | 34 ++++++++++++++--------------------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index 1f73af5..2338f20 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -5,24 +5,18 @@ export const add = (set, input) => set((state) => ({
   }
 }))
 
-export const markAsDone = (set, item) => set((state) => {
-  const updatedArray = state.daily.todos.filter(i => i.id !== item.id)
-  return ({
-    daily: {
-      ...state.daily,
-      todos: updatedArray,
-      dones: [...state.daily.dones, item]
-    }
-  })
-})
+export const markAsDone = (set, item) => set((state) => ({
+  daily: {
+    ...state.daily,
+    todos: state.daily.todos.filter(i => i.id !== item.id),
+    dones: [...state.daily.dones, item].sort((a, b) => a.id - b.id)
+  }
+}))
 
-export const markAsTodo = (set, item) => set((state) => {
-  const updatedArray = state.daily.dones.filter(i => i.id !== item.id)
-  return ({
-    daily: {
-      ...state.daily,
-      todos: [...state.daily.todos, item],
-      dones: updatedArray
-    }
-  })
-})
+export const markAsTodo = (set, item) => set((state) => ({
+  daily: {
+    ...state.daily,
+    todos: [...state.daily.todos, item].sort((a, b) => a.id - b.id),
+    dones: state.daily.dones.filter(i => i.id !== item.id)
+  }
+}))

From 49b6dee083e59a47666021b6a13f28331ab878c1 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 13:26:42 -0500
Subject: [PATCH 15/36] Count completed or dones items to show completed
 percentage branch feat/todo

---
 src/store/store.js      | 10 +++++-----
 src/store/todo_logic.js |  2 ++
 src/todo/Todo.jsx       |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index e9002b7..adf8a27 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,10 +1,10 @@
 import { create } from "zustand"
 import { devtools } from "zustand/middleware"
-import { add, markAsDone, markAsTodo } from "./todo_logic.js"
+import { add, completed, markAsDone, markAsTodo} from "./todo_logic.js"
 
-const todoDailySlice = set => ({
+const todoDailySlice = (set, get) => ({
   title: "Daily Goals",
-  completed: "23%",
+  completed: () => completed(get),
   todos: [],
   dones: [],
   add: (input) => add(set, input),
@@ -12,6 +12,6 @@ const todoDailySlice = set => ({
   markAsTodo: (item) => markAsTodo(set, item)
 })
 
-export const Store = create(devtools(set => ({
-  daily: todoDailySlice(set)
+export const Store = create(devtools((set, get) => ({
+  daily: todoDailySlice(set, get)
 })))
\ No newline at end of file
diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index 2338f20..b7ffd7b 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -20,3 +20,5 @@ export const markAsTodo = (set, item) => set((state) => ({
     dones: state.daily.dones.filter(i => i.id !== item.id)
   }
 }))
+
+export const completed = (get) => `${(Math.floor((get().daily.dones.length / (get().daily.todos.length + get().daily.dones.length)) * 100)).toString()}%`
\ No newline at end of file
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 1b10982..eae88ae 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -14,7 +14,7 @@ export const Todo = ({ store }) => {
   return (
     <div className='Todos'>
       <header>
-        <span>Completed: <span>{store.completed}</span></span>
+        <span>Completed: <span>{store.completed()}</span></span>
         <h1>{store.title}</h1>
       </header>
       <ul>

From 8c29f07a6eed0dd4cb4984f5215145954ee85cea Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 13:29:06 -0500
Subject: [PATCH 16/36] Conditional rendering of completed span branch
 feat/todo

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

diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index eae88ae..6ec7783 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -14,7 +14,7 @@ export const Todo = ({ store }) => {
   return (
     <div className='Todos'>
       <header>
-        <span>Completed: <span>{store.completed()}</span></span>
+        <span className={store.completed() === "NaN%" ? 'hide' : ''} >Completed: <span>{store.completed()}</span></span>
         <h1>{store.title}</h1>
       </header>
       <ul>

From 0b262f1c0e6c945aa10f2bbdf335f7b44104d62a Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 13:43:15 -0500
Subject: [PATCH 17/36] Delete all completed goals branch feat/todo

---
 src/store/store.js      |  5 +++--
 src/store/todo_logic.js | 11 ++++++++++-
 src/todo/Todo.jsx       |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index adf8a27..6dc6946 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,6 +1,6 @@
 import { create } from "zustand"
 import { devtools } from "zustand/middleware"
-import { add, completed, markAsDone, markAsTodo} from "./todo_logic.js"
+import { add, completed, markAsDone, markAsTodo, deleteDones } from "./todo_logic.js"
 
 const todoDailySlice = (set, get) => ({
   title: "Daily Goals",
@@ -9,7 +9,8 @@ const todoDailySlice = (set, get) => ({
   dones: [],
   add: (input) => add(set, input),
   markAsDone: (item) => markAsDone(set, item),
-  markAsTodo: (item) => markAsTodo(set, item)
+  markAsTodo: (item) => markAsTodo(set, item),
+  deleteDones: () => deleteDones(set)
 })
 
 export const Store = create(devtools((set, get) => ({
diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index b7ffd7b..2b5a44b 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -21,4 +21,13 @@ export const markAsTodo = (set, item) => set((state) => ({
   }
 }))
 
-export const completed = (get) => `${(Math.floor((get().daily.dones.length / (get().daily.todos.length + get().daily.dones.length)) * 100)).toString()}%`
\ No newline at end of file
+export const completed = (get) => (
+  `${(Math.floor((get().daily.dones.length / (get().daily.todos.length + get().daily.dones.length))*100)).toString()}%`
+)
+
+export const deleteDones = (set) => set((state)=>({
+  daily: {
+    ...state.daily,
+    dones: []
+  }
+}))
\ No newline at end of file
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 6ec7783..50e3762 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -22,7 +22,7 @@ export const Todo = ({ store }) => {
         {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item)} key={item.id}>{item.content}</li>))}
       </ul>
       <footer>
-        <button>Delete All Completed</button>
+        <button onClick={() => store.deleteDones()} >Delete All Completed</button>
         <input
           type="text"
           value={input}

From 7cb29e4beabbad9d6c3c3459bea360c7933bd690 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 14:23:29 -0500
Subject: [PATCH 18/36] Shrin code by using && operator in ternary operator
 branch feat/todo

---
 src/todo/Todo.jsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 50e3762..f53a290 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -3,18 +3,14 @@ import './Todo.css'
 
 export const Todo = ({ store }) => {
   const [input, setInput] = useState("")
-
-  const handleInputEnterKey = (k) => {
-    if (k.key === "Enter") {
-      store.add(input)
-      setInput("")
-    }
-  }
+  const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.add(input), setInput(""))
 
   return (
-    <div className='Todos'>
+    <div className='Todo'>
       <header>
-        <span className={store.completed() === "NaN%" ? 'hide' : ''} >Completed: <span>{store.completed()}</span></span>
+        <div>
+          <span className={store.completed() === "NaN%" ? 'hide' : ''}>Completed: <span>{store.completed()}</span></span>
+        </div>
         <h1>{store.title}</h1>
       </header>
       <ul>

From f706234626553026ad9e8703ca196ecb39e2c191 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 14:24:38 -0500
Subject: [PATCH 19/36] Fix classname typo between Todos and Todo branch
 feat/todo

---
 src/App.css        |  2 +-
 src/todo/Todo.css  | 45 ++++++++++++++++++++++++++++++++++++++++++---
 src/todo/Todos.css | 43 ++-----------------------------------------
 src/todo/Todos.jsx |  2 +-
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/App.css b/src/App.css
index 10c8f77..4cdf297 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,7 +20,7 @@ li {
   column-gap: 1%;
 }
 
-.Todo,
+.Todos,
 .Doing,
 .Done {
   width: 33%;
diff --git a/src/todo/Todo.css b/src/todo/Todo.css
index d2b187d..5c199b8 100644
--- a/src/todo/Todo.css
+++ b/src/todo/Todo.css
@@ -1,9 +1,48 @@
 .Todo {
+  width: 100%;
+  border: 1px solid red;
+  border-radius: 10px;
+  padding: 10px;
   display: flex;
-  row-gap: 22px;
-  overflow-y: auto;
+  flex-direction: column;
+  row-gap: 12px;
 }
 
-.Todo .dones {
+.Todo header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.Todo header span span {
+  font-size: 24px;
+}
+
+.Todo header h1 {
+  font-size: 22px;
+}
+
+.Todo ul {
+  width: 95%;
+  align-self: flex-end;
+  font-size: 12px;
+}
+
+.Todo ul .dones {
   color: rgb(101, 101, 101);
+}
+
+.Todo footer {
+  display: flex;
+  column-gap: 12px;
+}
+
+.Todo footer button {
+  width: fit-content;
+  font-size: 16px;
+  text-wrap: nowrap;
+}
+
+.Todo footer input {
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/todo/Todos.css b/src/todo/Todos.css
index 45843d0..9fbbb7b 100644
--- a/src/todo/Todos.css
+++ b/src/todo/Todos.css
@@ -1,44 +1,5 @@
 .Todos {
-  width: 100%;
-  border: 1px solid red;
-  border-radius: 10px;
-  padding: 10px;
   display: flex;
-  flex-direction: column;
-  row-gap: 12px;
+  row-gap: 22px;
+  overflow-y: auto;
 }
-
-.Todos header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.Todos header span span {
-  font-size: 24px;
-}
-
-.Todos header h1 {
-  font-size: 22px;
-}
-
-.Todos ul {
-  width: 95%;
-  align-self: flex-end;
-  font-size: 12px;
-}
-
-.Todos footer {
-  display: flex;
-  column-gap: 12px;
-}
-
-.Todos footer button {
-  width: fit-content;
-  font-size: 16px;
-  text-wrap: nowrap;
-}
-
-.Todos footer input {
-  width: 100%;
-}
\ No newline at end of file
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index 9659f14..5cb9c37 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -5,7 +5,7 @@ import './Todos.css'
 export const Todos = () => {
   const store = Store()
   return (
-    <div className='Todo'>
+    <div className='Todos'>
       <h1>Todo</h1>
       <Todo store={store.daily} />
     </div>

From 4bceb9fd905da716e7dcb18ce3677b4da807fb49 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 14:26:37 -0500
Subject: [PATCH 20/36] Change cursor shape when overing an li tag branch
 feat/todo

---
 src/todo/Todo.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/todo/Todo.css b/src/todo/Todo.css
index 5c199b8..b0c2611 100644
--- a/src/todo/Todo.css
+++ b/src/todo/Todo.css
@@ -28,6 +28,10 @@
   font-size: 12px;
 }
 
+.Todo ul li {
+  cursor: pointer;
+}
+
 .Todo ul .dones {
   color: rgb(101, 101, 101);
 }

From 8d4515cd40fae5223c4024d5a246998ca5656066 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 20:08:31 -0500
Subject: [PATCH 21/36] Conditional rendering of Delete All Completed Btn
 depending if there is or not one or more completed or done goal branch
 feat/todo

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

diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index f53a290..d5cef21 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -8,9 +8,7 @@ export const Todo = ({ store }) => {
   return (
     <div className='Todo'>
       <header>
-        <div>
-          <span className={store.completed() === "NaN%" ? 'hide' : ''}>Completed: <span>{store.completed()}</span></span>
-        </div>
+        <div><span className={store.completed() === "NaN%" ? 'hide' : ''}>Completed: <span>{store.completed()}</span></span></div>
         <h1>{store.title}</h1>
       </header>
       <ul>
@@ -18,7 +16,7 @@ export const Todo = ({ store }) => {
         {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item)} key={item.id}>{item.content}</li>))}
       </ul>
       <footer>
-        <button onClick={() => store.deleteDones()} >Delete All Completed</button>
+        <button onClick={() => store.deleteDones()} className={`${store.dones.length === 0 ? 'hide' : ''}`}>Delete All Completed</button>
         <input
           type="text"
           value={input}

From 6a93f59d215f8c9e47162f72b96f807fb55a359a Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 21:05:46 -0500
Subject: [PATCH 22/36] Improve style of Todo component branch feat/todo

---
 src/todo/Todo.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/todo/Todo.css b/src/todo/Todo.css
index b0c2611..917cfea 100644
--- a/src/todo/Todo.css
+++ b/src/todo/Todo.css
@@ -16,6 +16,7 @@
 
 .Todo header span span {
   font-size: 24px;
+  font-weight: 700;
 }
 
 .Todo header h1 {
@@ -30,6 +31,7 @@
 
 .Todo ul li {
   cursor: pointer;
+  padding: 5px 0;
 }
 
 .Todo ul .dones {
@@ -43,10 +45,16 @@
 
 .Todo footer button {
   width: fit-content;
-  font-size: 16px;
+  font-size: 14px;
   text-wrap: nowrap;
 }
 
 .Todo footer input {
   width: 100%;
+  padding: 5px;
+  border: 1px solid red;
+  border-radius: 5px;
+  outline: none;
+  color: white;
+  background-color: black;
 }
\ No newline at end of file

From 0a8f603ce4aa8ccc8e96c0e5d66881e8644e2067 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 21:08:56 -0500
Subject: [PATCH 23/36] Fix Stylelint error branch feat/todo

---
 src/todo/Todo.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/todo/Todo.css b/src/todo/Todo.css
index 917cfea..72ae026 100644
--- a/src/todo/Todo.css
+++ b/src/todo/Todo.css
@@ -46,7 +46,7 @@
 .Todo footer button {
   width: fit-content;
   font-size: 14px;
-  text-wrap: nowrap;
+  white-space: nowrap;
 }
 
 .Todo footer input {
@@ -57,4 +57,4 @@
   outline: none;
   color: white;
   background-color: black;
-}
\ No newline at end of file
+}

From 1d4a4be65a2707bf5831bb1734d2b19e3a7026a2 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Tue, 13 Aug 2024 21:18:15 -0500
Subject: [PATCH 24/36] Install propTypes library and fix propType ESLint error
 branch feat/todo

---
 package-lock.json | 1 +
 package.json      | 1 +
 src/todo/Todo.jsx | 5 ++++-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 9569103..0425bff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.3",
+        "prop-types": "^15.8.1",
         "react": "^18.3.1",
         "react-countdown": "^2.3.5",
         "react-dom": "^18.3.1",
diff --git a/package.json b/package.json
index 96e685b..ebc3390 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.7.3",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-countdown": "^2.3.5",
     "react-dom": "^18.3.1",
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index d5cef21..65b6734 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import PropTypes from 'prop-types'
 import './Todo.css'
 
 export const Todo = ({ store }) => {
@@ -27,4 +28,6 @@ export const Todo = ({ store }) => {
       </footer>
     </div>
   )
-}
\ No newline at end of file
+}
+
+Todo.propTypes = { store: PropTypes.object }
\ No newline at end of file

From 9d145788f38a544cf93943e03270fae43eb12f8b Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 18:58:13 -0500
Subject: [PATCH 25/36] Save in localStorage todos and dones items for Daily
 Goals component branch feat/todo

---
 src/store/store.js | 4 ++--
 src/todo/Todo.jsx  | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index 6dc6946..c590e43 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -5,8 +5,8 @@ import { add, completed, markAsDone, markAsTodo, deleteDones } from "./todo_logi
 const todoDailySlice = (set, get) => ({
   title: "Daily Goals",
   completed: () => completed(get),
-  todos: [],
-  dones: [],
+  todos: JSON.parse(localStorage.getItem("dailyTodos")) || [],
+  dones: JSON.parse(localStorage.getItem("dailyDones")) || [],
   add: (input) => add(set, input),
   markAsDone: (item) => markAsDone(set, item),
   markAsTodo: (item) => markAsTodo(set, item),
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 65b6734..6ab6536 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import './Todo.css'
 
@@ -6,6 +6,11 @@ export const Todo = ({ store }) => {
   const [input, setInput] = useState("")
   const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.add(input), setInput(""))
 
+  useEffect(()=>{
+    localStorage.setItem("dailyTodos", JSON.stringify(store.todos))
+    localStorage.setItem("dailyDones", JSON.stringify(store.dones))
+  },[store.todos, store.dones])
+
   return (
     <div className='Todo'>
       <header>

From 8b8bcecc21da6d70b71c0f0ed9b6a89f685a44f1 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:26:40 -0500
Subject: [PATCH 26/36] Create slices for weekly and monthly data on Store
 branch feat/todo

---
 src/store/store.js | 40 ++++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index c590e43..b6ba8c8 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -4,15 +4,39 @@ import { add, completed, markAsDone, markAsTodo, deleteDones } from "./todo_logi
 
 const todoDailySlice = (set, get) => ({
   title: "Daily Goals",
-  completed: () => completed(get),
-  todos: JSON.parse(localStorage.getItem("dailyTodos")) || [],
-  dones: JSON.parse(localStorage.getItem("dailyDones")) || [],
-  add: (input) => add(set, input),
-  markAsDone: (item) => markAsDone(set, item),
-  markAsTodo: (item) => markAsTodo(set, item),
-  deleteDones: () => deleteDones(set)
+  completed: (sliceID) => completed(get, sliceID),
+  todos: JSON.parse(localStorage.getItem("Daily Goals Todos")) || [],
+  dones: JSON.parse(localStorage.getItem("Daily Goals Dones")) || [],
+  add: (input, sliceID) => add(set, input, sliceID),
+  markAsDone: (item, sliceID) => markAsDone(set, item, sliceID),
+  markAsTodo: (item, sliceID) => markAsTodo(set, item, sliceID),
+  deleteDones: (sliceID) => deleteDones(set, sliceID)
+})
+
+const todoWeeklySlice = (set, get) => ({
+  title: "Weekly Goals",
+  completed: (sliceID) => completed(get, sliceID),
+  todos: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [],
+  dones: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [],
+  add: (input, sliceID) => add(set, input, sliceID),
+  markAsDone: (item, sliceID) => markAsDone(set, item, sliceID),
+  markAsTodo: (item, sliceID) => markAsTodo(set, item, sliceID),
+  deleteDones: (sliceID) => deleteDones(set, sliceID)
+})
+
+const todoMonthlySlice = (set, get) => ({
+  title: "Monthly Goals",
+  completed: (sliceID) => completed(get, sliceID),
+  todos: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [],
+  dones: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [],
+  add: (input, sliceID) => add(set, input, sliceID),
+  markAsDone: (item, sliceID) => markAsDone(set, item, sliceID),
+  markAsTodo: (item, sliceID) => markAsTodo(set, item, sliceID),
+  deleteDones: (sliceID) => deleteDones(set, sliceID)
 })
 
 export const Store = create(devtools((set, get) => ({
-  daily: todoDailySlice(set, get)
+  daily: todoDailySlice(set, get),
+  weekly: todoWeeklySlice(set, get),
+  monthly: todoMonthlySlice(set, get)
 })))
\ No newline at end of file

From c77ca0793df7a3645b061de8f135f96f910babfb Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:27:29 -0500
Subject: [PATCH 27/36] Give an aditional prop to each function to avoid
 creating add and other functions for each daily weekly and monthly branch
 feat/todo

---
 src/store/todo_logic.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index 2b5a44b..c0cdc80 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -1,33 +1,33 @@
-export const add = (set, input) => set((state) => ({
-  daily: {
-    ...state.daily,
-    todos: [...state.daily.todos, { id: Date.now(), content: input }]
+export const add = (set, input, sliceID) => set((state) => ({
+  [sliceID]: {
+    ...state[sliceID],
+    todos: [...state[sliceID].todos, { id: Date.now(), content: input }]
   }
 }))
 
-export const markAsDone = (set, item) => set((state) => ({
-  daily: {
-    ...state.daily,
-    todos: state.daily.todos.filter(i => i.id !== item.id),
-    dones: [...state.daily.dones, item].sort((a, b) => a.id - b.id)
+export const markAsDone = (set, item, sliceID) => set((state) => ({
+  [sliceID]: {
+    ...state[sliceID],
+    todos: state[sliceID].todos.filter(i => i.id !== item.id),
+    dones: [...state[sliceID].dones, item].sort((a, b) => a.id - b.id)
   }
 }))
 
-export const markAsTodo = (set, item) => set((state) => ({
-  daily: {
-    ...state.daily,
-    todos: [...state.daily.todos, item].sort((a, b) => a.id - b.id),
-    dones: state.daily.dones.filter(i => i.id !== item.id)
+export const markAsTodo = (set, item, sliceID) => set((state) => ({
+  [sliceID]: {
+    ...state[sliceID],
+    todos: [...state[sliceID].todos, item].sort((a, b) => a.id - b.id),
+    dones: state[sliceID].dones.filter(i => i.id !== item.id)
   }
 }))
 
-export const completed = (get) => (
-  `${(Math.floor((get().daily.dones.length / (get().daily.todos.length + get().daily.dones.length))*100)).toString()}%`
+export const completed = (get, sliceID) => (
+  `${(Math.floor((get()[sliceID].dones.length / (get()[sliceID].todos.length + get()[sliceID].dones.length))*100)).toString()}%`
 )
 
-export const deleteDones = (set) => set((state)=>({
-  daily: {
-    ...state.daily,
+export const deleteDones = (set, sliceID) => set((state)=>({
+  [sliceID]: {
+    ...state[sliceID],
     dones: []
   }
 }))
\ No newline at end of file

From 2fdcb009da6cd6b64979785b8f7352359f6fb031 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:29:04 -0500
Subject: [PATCH 28/36] Render Daily Weekly and Monthly components with a new
 arg branch feat/todo

---
 src/todo/Todo.jsx  | 20 +++++++++++---------
 src/todo/Todos.jsx |  4 +++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 6ab6536..d8c97bd 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -2,27 +2,29 @@ import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import './Todo.css'
 
-export const Todo = ({ store }) => {
-  const [input, setInput] = useState("")
-  const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.add(input), setInput(""))
+export const Todo = ({ store, sliceID }) => {
+  const [input, setInput] = useState("")  
+  // console.log(sliceID);
+  
+  const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.add(input, sliceID), setInput(""))
 
   useEffect(()=>{
-    localStorage.setItem("dailyTodos", JSON.stringify(store.todos))
-    localStorage.setItem("dailyDones", JSON.stringify(store.dones))
+    localStorage.setItem(`${store.title} Todos`, JSON.stringify(store.todos))
+    localStorage.setItem(`${store.title} Dones`, JSON.stringify(store.dones))
   },[store.todos, store.dones])
 
   return (
     <div className='Todo'>
       <header>
-        <div><span className={store.completed() === "NaN%" ? 'hide' : ''}>Completed: <span>{store.completed()}</span></span></div>
+        <div><span className={store.completed(sliceID) === "NaN%" ? 'hide' : ''}>Completed: <span>{store.completed(sliceID)}</span></span></div>
         <h1>{store.title}</h1>
       </header>
       <ul>
-        {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item)}>{item.content}</li>))}
-        {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item)} key={item.id}>{item.content}</li>))}
+        {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item, sliceID)}>{item.content}</li>))}
+        {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item, sliceID)} key={item.id}>{item.content}</li>))}
       </ul>
       <footer>
-        <button onClick={() => store.deleteDones()} className={`${store.dones.length === 0 ? 'hide' : ''}`}>Delete All Completed</button>
+        <button onClick={() => store.deleteDones(sliceID)} className={`${store.dones.length === 0 ? 'hide' : ''}`}>Delete All Completed</button>
         <input
           type="text"
           value={input}
diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index 5cb9c37..e72729b 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -7,7 +7,9 @@ export const Todos = () => {
   return (
     <div className='Todos'>
       <h1>Todo</h1>
-      <Todo store={store.daily} />
+      <Todo store={store.daily} sliceID="daily" />
+      <Todo store={store.weekly} sliceID="weekly" />
+      <Todo store={store.monthly} sliceID="monthly" />
     </div>
   )
 }
\ No newline at end of file

From be562703108367bfa387455e09675fdb0fff3442 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:30:14 -0500
Subject: [PATCH 29/36] Delete aditional prop from Todos components because
 that prop will be added on the Store branch feat/todo

---
 src/todo/Todos.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx
index e72729b..4527f46 100644
--- a/src/todo/Todos.jsx
+++ b/src/todo/Todos.jsx
@@ -7,9 +7,9 @@ export const Todos = () => {
   return (
     <div className='Todos'>
       <h1>Todo</h1>
-      <Todo store={store.daily} sliceID="daily" />
-      <Todo store={store.weekly} sliceID="weekly" />
-      <Todo store={store.monthly} sliceID="monthly" />
+      <Todo store={store.daily} />
+      <Todo store={store.weekly} />
+      <Todo store={store.monthly} />
     </div>
   )
 }
\ No newline at end of file

From 1e4231ecfeacdc407c59e4db6173c61c47496a7f Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:33:01 -0500
Subject: [PATCH 30/36] Remove prop sliceID from Todo component as this prop
 will be given in the Store branch feat/todo

---
 src/todo/Todo.jsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index d8c97bd..3bdc1a4 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -2,29 +2,28 @@ import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import './Todo.css'
 
-export const Todo = ({ store, sliceID }) => {
-  const [input, setInput] = useState("")  
-  // console.log(sliceID);
-  
-  const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.add(input, sliceID), setInput(""))
+export const Todo = ({ store }) => {
+  const [input, setInput] = useState("")
 
-  useEffect(()=>{
+  const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.add(input), setInput(""))
+
+  useEffect(() => {
     localStorage.setItem(`${store.title} Todos`, JSON.stringify(store.todos))
     localStorage.setItem(`${store.title} Dones`, JSON.stringify(store.dones))
-  },[store.todos, store.dones])
+  }, [store.todos, store.dones])
 
   return (
     <div className='Todo'>
       <header>
-        <div><span className={store.completed(sliceID) === "NaN%" ? 'hide' : ''}>Completed: <span>{store.completed(sliceID)}</span></span></div>
+        <div><span className={store.completed() === "NaN%" ? 'hide' : ''}>Completed: <span>{store.completed()}</span></span></div>
         <h1>{store.title}</h1>
       </header>
       <ul>
-        {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item, sliceID)}>{item.content}</li>))}
-        {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item, sliceID)} key={item.id}>{item.content}</li>))}
+        {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item)}>{item.content}</li>))}
+        {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item)} key={item.id}>{item.content}</li>))}
       </ul>
       <footer>
-        <button onClick={() => store.deleteDones(sliceID)} className={`${store.dones.length === 0 ? 'hide' : ''}`}>Delete All Completed</button>
+        <button onClick={() => store.deleteDones()} className={`${store.dones.length === 0 ? 'hide' : ''}`}>Delete All Completed</button>
         <input
           type="text"
           value={input}

From 994d0513b2fed9f7b9c0c3227d706d29f7cec68c Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:39:07 -0500
Subject: [PATCH 31/36] Replace the arg with a string when calling functions
 branch feat/todo

---
 src/store/store.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index b6ba8c8..ed262a0 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -4,35 +4,35 @@ import { add, completed, markAsDone, markAsTodo, deleteDones } from "./todo_logi
 
 const todoDailySlice = (set, get) => ({
   title: "Daily Goals",
-  completed: (sliceID) => completed(get, sliceID),
+  completed: () => completed(get, "daily"),
   todos: JSON.parse(localStorage.getItem("Daily Goals Todos")) || [],
   dones: JSON.parse(localStorage.getItem("Daily Goals Dones")) || [],
-  add: (input, sliceID) => add(set, input, sliceID),
-  markAsDone: (item, sliceID) => markAsDone(set, item, sliceID),
-  markAsTodo: (item, sliceID) => markAsTodo(set, item, sliceID),
-  deleteDones: (sliceID) => deleteDones(set, sliceID)
+  add: (input) => add(set, input, "daily"),
+  markAsDone: (item) => markAsDone(set, item, "daily"),
+  markAsTodo: (item) => markAsTodo(set, item, "daily"),
+  deleteDones: () => deleteDones(set, "daily")
 })
 
 const todoWeeklySlice = (set, get) => ({
   title: "Weekly Goals",
-  completed: (sliceID) => completed(get, sliceID),
+  completed: () => completed(get, "weekly"),
   todos: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [],
   dones: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [],
-  add: (input, sliceID) => add(set, input, sliceID),
-  markAsDone: (item, sliceID) => markAsDone(set, item, sliceID),
-  markAsTodo: (item, sliceID) => markAsTodo(set, item, sliceID),
-  deleteDones: (sliceID) => deleteDones(set, sliceID)
+  add: (input) => add(set, input, "weekly"),
+  markAsDone: (item) => markAsDone(set, item, "weekly"),
+  markAsTodo: (item) => markAsTodo(set, item, "weekly"),
+  deleteDones: () => deleteDones(set, "weekly")
 })
 
 const todoMonthlySlice = (set, get) => ({
   title: "Monthly Goals",
-  completed: (sliceID) => completed(get, sliceID),
+  completed: () => completed(get, "monthly"),
   todos: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [],
   dones: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [],
-  add: (input, sliceID) => add(set, input, sliceID),
-  markAsDone: (item, sliceID) => markAsDone(set, item, sliceID),
-  markAsTodo: (item, sliceID) => markAsTodo(set, item, sliceID),
-  deleteDones: (sliceID) => deleteDones(set, sliceID)
+  add: (input) => add(set, input, "monthly"),
+  markAsDone: (item) => markAsDone(set, item, "monthly"),
+  markAsTodo: (item) => markAsTodo(set, item, "monthly"),
+  deleteDones: () => deleteDones(set, "monthly")
 })
 
 export const Store = create(devtools((set, get) => ({

From d13b54cde82237a9304b491b2bdfa9c8b63a63ab Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:41:37 -0500
Subject: [PATCH 32/36] Fix localStorage getting wrong data for dones array
 branch feat/todo

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

diff --git a/src/store/store.js b/src/store/store.js
index ed262a0..d8308fd 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -17,7 +17,7 @@ const todoWeeklySlice = (set, get) => ({
   title: "Weekly Goals",
   completed: () => completed(get, "weekly"),
   todos: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [],
-  dones: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [],
+  dones: JSON.parse(localStorage.getItem("Weekly Goals Dones")) || [],
   add: (input) => add(set, input, "weekly"),
   markAsDone: (item) => markAsDone(set, item, "weekly"),
   markAsTodo: (item) => markAsTodo(set, item, "weekly"),
@@ -28,7 +28,7 @@ const todoMonthlySlice = (set, get) => ({
   title: "Monthly Goals",
   completed: () => completed(get, "monthly"),
   todos: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [],
-  dones: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [],
+  dones: JSON.parse(localStorage.getItem("Monthly Goals Dones")) || [],
   add: (input) => add(set, input, "monthly"),
   markAsDone: (item) => markAsDone(set, item, "monthly"),
   markAsTodo: (item) => markAsTodo(set, item, "monthly"),

From 226cf4de1476862c55c7c991990d6ca068320465 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Wed, 14 Aug 2024 23:45:29 -0500
Subject: [PATCH 33/36] Fix ESLint error branch feat/todo

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

diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 3bdc1a4..27a77c0 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -10,7 +10,7 @@ export const Todo = ({ store }) => {
   useEffect(() => {
     localStorage.setItem(`${store.title} Todos`, JSON.stringify(store.todos))
     localStorage.setItem(`${store.title} Dones`, JSON.stringify(store.dones))
-  }, [store.todos, store.dones])
+  }, [store.todos, store.dones, store.title])
 
   return (
     <div className='Todo'>

From ac11b2c554933b5d60f735f29bfd7e01d6248532 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Thu, 15 Aug 2024 00:10:27 -0500
Subject: [PATCH 34/36] Improve layout on small screens branch feat/todo

---
 src/App.css        | 8 +++++++-
 src/todo/Todos.css | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 4cdf297..4c4f081 100644
--- a/src/App.css
+++ b/src/App.css
@@ -37,12 +37,18 @@ li {
     row-gap: 1%;
   }
 
-  .Todo,
+  .Todos,
   .Doing,
   .Done {
     width: 100%;
   }
 
+  .Todos {
+    overflow-y: visible;
+    flex-direction: column;
+    row-gap: 10px;
+  }
+
   .clock {
     font-size: 16vw;
   }
diff --git a/src/todo/Todos.css b/src/todo/Todos.css
index 9fbbb7b..3a232b3 100644
--- a/src/todo/Todos.css
+++ b/src/todo/Todos.css
@@ -1,5 +1,5 @@
 .Todos {
   display: flex;
-  row-gap: 22px;
+  row-gap: 1%;
   overflow-y: auto;
 }

From 46a252fe0573f25888919df78fc889fc165508cd Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Thu, 15 Aug 2024 00:16:46 -0500
Subject: [PATCH 35/36] Fix ESLint errors branch feat/todo

---
 src/App.jsx       | 22 ++++++++++------------
 src/todo/Todo.jsx |  3 +--
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1f17638..a0642bb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,12 @@
-import {Todos} from './todo/Todos.jsx'
-import {Doing} from './doing/Doing.jsx'
-import {Done} from './done/Done.jsx'
+import { Todos } from './todo/Todos.jsx'
+import { Doing } from './doing/Doing.jsx'
+import { Done } from './done/Done.jsx'
 import './App.css'
 
-export const App = () => {
-  return (
-    <div className='App'>
-      <Todos />
-      <Doing />
-      <Done />
-    </div>
-  )
-}
\ No newline at end of file
+export const App = () => (
+  <div className='App'>
+    <Todos />
+    <Doing />
+    <Done />
+  </div>
+)
\ No newline at end of file
diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx
index 27a77c0..b43e521 100644
--- a/src/todo/Todo.jsx
+++ b/src/todo/Todo.jsx
@@ -4,7 +4,6 @@ import './Todo.css'
 
 export const Todo = ({ store }) => {
   const [input, setInput] = useState("")
-
   const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.add(input), setInput(""))
 
   useEffect(() => {
@@ -20,7 +19,7 @@ export const Todo = ({ store }) => {
       </header>
       <ul>
         {store.todos.map(item => (<li key={item.id} onClick={() => store.markAsDone(item)}>{item.content}</li>))}
-        {store.dones.map(item => (<li className='dones' onClick={() => store.markAsTodo(item)} key={item.id}>{item.content}</li>))}
+        {store.dones.map(item => (<li key={item.id} className='dones' onClick={() => store.markAsTodo(item)}>{item.content}</li>))}
       </ul>
       <footer>
         <button onClick={() => store.deleteDones()} className={`${store.dones.length === 0 ? 'hide' : ''}`}>Delete All Completed</button>

From 8d1cfe146dcb51026cc0a5dbafb1f873bd386c41 Mon Sep 17 00:00:00 2001
From: dani <danifromecuador@gmail.com>
Date: Fri, 16 Aug 2024 18:15:41 -0500
Subject: [PATCH 36/36] Log a specific action type for each `set` function by
 passing a third parameter on Store functions when using Redux devtools branch
 feat/todo

---
 src/store/todo_logic.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/store/todo_logic.js b/src/store/todo_logic.js
index c0cdc80..29fa565 100644
--- a/src/store/todo_logic.js
+++ b/src/store/todo_logic.js
@@ -3,7 +3,7 @@ export const add = (set, input, sliceID) => set((state) => ({
     ...state[sliceID],
     todos: [...state[sliceID].todos, { id: Date.now(), content: input }]
   }
-}))
+}), false, 'todo/add')
 
 export const markAsDone = (set, item, sliceID) => set((state) => ({
   [sliceID]: {
@@ -11,7 +11,7 @@ export const markAsDone = (set, item, sliceID) => set((state) => ({
     todos: state[sliceID].todos.filter(i => i.id !== item.id),
     dones: [...state[sliceID].dones, item].sort((a, b) => a.id - b.id)
   }
-}))
+}), false, 'todo/markAsDone')
 
 export const markAsTodo = (set, item, sliceID) => set((state) => ({
   [sliceID]: {
@@ -19,7 +19,7 @@ export const markAsTodo = (set, item, sliceID) => set((state) => ({
     todos: [...state[sliceID].todos, item].sort((a, b) => a.id - b.id),
     dones: state[sliceID].dones.filter(i => i.id !== item.id)
   }
-}))
+}), false, 'todo/markAsTodo')
 
 export const completed = (get, sliceID) => (
   `${(Math.floor((get()[sliceID].dones.length / (get()[sliceID].todos.length + get()[sliceID].dones.length))*100)).toString()}%`
@@ -30,4 +30,4 @@ export const deleteDones = (set, sliceID) => set((state)=>({
     ...state[sliceID],
     dones: []
   }
-}))
\ No newline at end of file
+}), false, 'todo/deleteDones')
\ No newline at end of file