From 487acb8ea8f573b408ac76c63ad1106c687c25a1 Mon Sep 17 00:00:00 2001
From: sebn <sebn1247@gmail.com>
Date: Tue, 10 Dec 2024 16:01:35 +0900
Subject: [PATCH 1/6] feat:  add functionality to save TODO with confirmation

---
 simple.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/simple.html b/simple.html
index 2887e44..7e2ca9b 100644
--- a/simple.html
+++ b/simple.html
@@ -10,7 +10,7 @@
       <h1 class="title">TODO</h1>
       <div class="input-container">
         <input type="text" class="todo-input" />
-        <input type="button" value="저장" />
+        <input type="button" value="저장" id="save-button" />
       </div>
       <div class="list-container">
         <ul id="todo-list" class="todo-list">
@@ -21,4 +21,25 @@ <h1 class="title">TODO</h1>
     </section>
     <script></script>
   </body>
+  <script>
+    const saveButton = document.getElementById("save-button");
+    const todoInput = document.querySelector(".todo-input");
+    const todoList = document.getElementById("todo-list");
+
+    saveButton.addEventListener("click", () => {
+      const inputValue = todoInput.value.trim();
+      if(!inputValue) {
+        alert("입력한 값이 없습니다.");
+        return;
+      }
+
+      const confirmAlert = confirm(`"${inputValue}" 저장하시겠습니까?`);
+      if(confirmAlert) {
+        const newListItem = document.createElement("li");
+        newListItem.textContent = inputValue;
+        todoList.appendChild(newListItem);
+        todoInput.value = "";
+      }
+    });
+  </script>
 </html>

From 330ccbde7c472c0a589625bfacd1c0c9f42d9b17 Mon Sep 17 00:00:00 2001
From: sebn <sebn1247@gmail.com>
Date: Tue, 10 Dec 2024 16:16:05 +0900
Subject: [PATCH 2/6] feat:  add onkeyup event to handle TODO list

---
 detail.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/detail.html b/detail.html
index 160571b..3b7989c 100644
--- a/detail.html
+++ b/detail.html
@@ -9,7 +9,7 @@
     <section id="container">
       <h1 class="title">TODO LIST</h1>
       <div class="input-container">
-        <input type="text" class="todo-input" />
+        <input type="text" class="todo-input" onkeyup="addTodo(event)" />
       </div>
       <div class="filter-container">
         <select id="todo-filter">
@@ -23,5 +23,21 @@ <h1 class="title">TODO LIST</h1>
       </div>
     </section>
   </body>
-  <script></script>
+  <script>
+    function addTodo(event) {
+        if (event.key === "Enter") {
+          const todoInput = event.target;
+          const inputValue = todoInput.value.trim();
+
+          const todoList = document.getElementById("todo-list");
+          const newListItem = document.createElement("li");
+          newListItem.textContent = inputValue;
+          newListItem.classList.add("todo-item");
+          newListItem.dataset.status = "todo";
+          todoList.appendChild(newListItem);
+
+          todoInput.value = "";
+        }
+      }
+  </script>
 </html>

From e54d0cef6ad88cb17f5af68c6089c6704201d210 Mon Sep 17 00:00:00 2001
From: sebn <sebn1247@gmail.com>
Date: Tue, 10 Dec 2024 16:41:01 +0900
Subject: [PATCH 3/6] feat: add checkbox to handle todo completion status

---
 detail.html | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/detail.html b/detail.html
index 3b7989c..71dfaf2 100644
--- a/detail.html
+++ b/detail.html
@@ -24,20 +24,37 @@ <h1 class="title">TODO LIST</h1>
     </section>
   </body>
   <script>
+    const todoList = document.getElementById("todo-list");
+
     function addTodo(event) {
         if (event.key === "Enter") {
-          const todoInput = event.target;
-          const inputValue = todoInput.value.trim();
+            const todoInput = event.target;
+            const inputValue = todoInput.value.trim();
+
+            if (inputValue) {
+                const newListItem = document.createElement("li");
+                newListItem.classList.add("todo-item");
+                newListItem.dataset.status = "todo";
+
+                const checkbox = document.createElement("input");
+                checkbox.setAttribute("type", "checkbox");
+                checkbox.addEventListener("click", toggleTodoStatus);
 
-          const todoList = document.getElementById("todo-list");
-          const newListItem = document.createElement("li");
-          newListItem.textContent = inputValue;
-          newListItem.classList.add("todo-item");
-          newListItem.dataset.status = "todo";
-          todoList.appendChild(newListItem);
+                const todoText = document.createElement("span");
+                todoText.textContent = inputValue;
 
-          todoInput.value = "";
+                newListItem.appendChild(checkbox);
+                newListItem.appendChild(todoText);
+                todoList.appendChild(newListItem);
+
+                todoInput.value = "";
+            }
         }
-      }
+    }
+
+    function toggleTodoStatus(event) {
+        const listItem = event.target.parentElement;
+        listItem.dataset.status = event.target.checked ? "done" : "todo";
+    }
   </script>
 </html>

From 97af5e6ee93044ebe9254ab6f11d7cef4e15c4e9 Mon Sep 17 00:00:00 2001
From: sebn <sebn1247@gmail.com>
Date: Tue, 10 Dec 2024 16:53:56 +0900
Subject: [PATCH 4/6] feat: add edit functionality with input n save button

---
 detail.html | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/detail.html b/detail.html
index 71dfaf2..88bf68d 100644
--- a/detail.html
+++ b/detail.html
@@ -43,8 +43,13 @@ <h1 class="title">TODO LIST</h1>
                 const todoText = document.createElement("span");
                 todoText.textContent = inputValue;
 
+                const editButton = document.createElement("button");
+                editButton.textContent = "Edit";
+                editButton.addEventListener("click", () => editTodo(newListItem, todoText, editButton));
+
                 newListItem.appendChild(checkbox);
                 newListItem.appendChild(todoText);
+                newListItem.appendChild(editButton);
                 todoList.appendChild(newListItem);
 
                 todoInput.value = "";
@@ -56,5 +61,26 @@ <h1 class="title">TODO LIST</h1>
         const listItem = event.target.parentElement;
         listItem.dataset.status = event.target.checked ? "done" : "todo";
     }
+
+    function editTodo(listItem, todoText, editButton) {
+        const editInput = document.createElement("input");
+        editInput.setAttribute("type", "text");
+        editInput.value = todoText.textContent;
+
+        const saveButton = document.createElement("button");
+        saveButton.textContent = "Save";
+
+        editButton.style.display = "none";
+
+        saveButton.addEventListener("click", () => {
+            todoText.textContent = editInput.value;
+            listItem.replaceChild(todoText, editInput);
+            listItem.removeChild(saveButton);
+            editButton.style.display = "inline";
+        });
+
+        listItem.replaceChild(editInput, todoText);
+        listItem.appendChild(saveButton);
+    }
   </script>
 </html>

From 1535003b9fe7cdf86083124bdcf6ae12cd655b39 Mon Sep 17 00:00:00 2001
From: sebn <sebn1247@gmail.com>
Date: Tue, 10 Dec 2024 17:16:25 +0900
Subject: [PATCH 5/6] feat: add delete functionality with delete button

---
 detail.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/detail.html b/detail.html
index 88bf68d..93f3157 100644
--- a/detail.html
+++ b/detail.html
@@ -45,11 +45,16 @@ <h1 class="title">TODO LIST</h1>
 
                 const editButton = document.createElement("button");
                 editButton.textContent = "Edit";
-                editButton.addEventListener("click", () => editTodo(newListItem, todoText, editButton));
+                editButton.addEventListener("click", () => editTodo(newListItem, todoText, editButton, deleteButton));
+
+                const deleteButton = document.createElement("button");
+                deleteButton.textContent = "X";
+                deleteButton.addEventListener("click", () => deleteTodo(newListItem));
 
                 newListItem.appendChild(checkbox);
                 newListItem.appendChild(todoText);
                 newListItem.appendChild(editButton);
+                newListItem.appendChild(deleteButton);
                 todoList.appendChild(newListItem);
 
                 todoInput.value = "";
@@ -62,7 +67,7 @@ <h1 class="title">TODO LIST</h1>
         listItem.dataset.status = event.target.checked ? "done" : "todo";
     }
 
-    function editTodo(listItem, todoText, editButton) {
+    function editTodo(listItem, todoText, editButton, deleteButton) {
         const editInput = document.createElement("input");
         editInput.setAttribute("type", "text");
         editInput.value = todoText.textContent;
@@ -71,16 +76,23 @@ <h1 class="title">TODO LIST</h1>
         saveButton.textContent = "Save";
 
         editButton.style.display = "none";
+        deleteButton.style.display = "none";
 
         saveButton.addEventListener("click", () => {
             todoText.textContent = editInput.value;
             listItem.replaceChild(todoText, editInput);
             listItem.removeChild(saveButton);
             editButton.style.display = "inline";
+            deleteButton.style.display = "inline";
         });
 
         listItem.replaceChild(editInput, todoText);
         listItem.appendChild(saveButton);
     }
+
+    function deleteTodo(listItem) {
+      listItem.remove();
+    }
+
   </script>
 </html>

From 035b573b8e83b4901593b37c0cb2b24e6612b394 Mon Sep 17 00:00:00 2001
From: sebn <sebn1247@gmail.com>
Date: Tue, 10 Dec 2024 17:20:20 +0900
Subject: [PATCH 6/6] feat: add dropdown filter to view todos by status

---
 detail.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/detail.html b/detail.html
index 93f3157..5bc15fd 100644
--- a/detail.html
+++ b/detail.html
@@ -24,6 +24,22 @@ <h1 class="title">TODO LIST</h1>
     </section>
   </body>
   <script>
+    const filterDropdown = document.getElementById("todo-filter");
+    filterDropdown.addEventListener("change", filterTodoList);
+
+    function filterTodoList() {
+      const filterValue = filterDropdown.value;
+      const todoItems = todoList.querySelectorAll(".todo-item");
+
+      todoItems.forEach((item) => {
+            if (filterValue === "all" || item.dataset.status === filterValue) {
+                item.style.display = "";
+            } else {
+                item.style.display = "none";
+            }
+        });
+    }
+
     const todoList = document.getElementById("todo-list");
 
     function addTodo(event) {
@@ -93,6 +109,5 @@ <h1 class="title">TODO LIST</h1>
     function deleteTodo(listItem) {
       listItem.remove();
     }
-
   </script>
 </html>