From 2b37325e7a88446f6394bae47d9f24f2770b6bed Mon Sep 17 00:00:00 2001
From: rowanna <rowankimna@gmail.com>
Date: Tue, 10 Dec 2024 18:26:33 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=B4=88=EA=B8=89,=20=EC=A4=91?=
 =?UTF-8?q?=EA=B8=89=20todolist=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 detail.html | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 simple.html |  38 ++++++++++++---
 2 files changed, 162 insertions(+), 8 deletions(-)

diff --git a/detail.html b/detail.html
index 160571b..3bd3fe9 100644
--- a/detail.html
+++ b/detail.html
@@ -12,7 +12,7 @@ <h1 class="title">TODO LIST</h1>
         <input type="text" class="todo-input" />
       </div>
       <div class="filter-container">
-        <select id="todo-filter">
+        <select id="todo-filter" disabled>
           <option value="all">전체</option>
           <option value="todo">할일</option>
           <option value="done">완료</option>
@@ -23,5 +23,133 @@ <h1 class="title">TODO LIST</h1>
       </div>
     </section>
   </body>
-  <script></script>
+  <script>
+    // 변수선언
+    const $todolist = document.getElementById("todo-list");
+    const $todoInput = document.querySelector(".todo-input");
+    const $checkbox = document.querySelectorAll(".todo_checkbox");
+    const $todoFilter = document.getElementById("todo-filter");
+    let $liEl;
+    let inputText;
+
+    // 이벤트리스너 바인딩
+    $todoInput.addEventListener("input", (e) => {
+      inputText = e.target.value;
+    });
+    $todoInput.addEventListener("keydown", (e) => {
+      if (e.keyCode === 13) {
+        addTodo();
+      }
+    });
+
+    $todolist.addEventListener("click", (e) => {
+      // 동적으로 생겨난 체크박스이므로 이벤트위임
+      if (e.target.classList.contains("todo_checkbox")) {
+        toggleCompleteTodo(e);
+      }
+      if (e.target.classList.contains("todo_edit_btn")) {
+        switchToInputField(e);
+      }
+      if (e.target.classList.contains("edit_save_btn")) {
+        editTodo(e);
+      }
+      if (e.target.classList.contains("todo_delete_btn")) {
+        deleteTodo(e);
+      }
+    });
+    $todolist.addEventListener("keydown", (e) => {
+      if (e.keyCode === 13) {
+        if (e.target.classList.contains("edit_input")) {
+          editTodo(e);
+        }
+      }
+    });
+    $todoFilter.addEventListener("change", (e) => {
+      selectFilterOption(e);
+    });
+
+    // 함수선언
+    /*
+     * 할 일 추가
+     */
+    const addTodo = () => {
+      $liEl = `
+          <li data-status="todo">
+            <input class="todo_checkbox" type="checkbox" name="" id="" />
+            ${inputText}
+            <button class="todo_edit_btn" type="text">Edit</button>
+            <button class="todo_delete_btn" type="text">X</button>
+          </li>`;
+
+      $todolist.insertAdjacentHTML("beforeend", $liEl);
+      $todoFilter.removeAttribute("disabled");
+
+      // 초기화
+      $todoInput.value = "";
+      $todoFilter.value = "all";
+    };
+    /*
+     * 할 일 완료 체크박스 토글
+     */
+    const toggleCompleteTodo = (e) => {
+      if (e.target.checked) {
+        e.target.parentElement.dataset.status = "done";
+      } else {
+        e.target.parentElement.dataset.status = "todo";
+      }
+    };
+    /*
+     * 할 일 수정가능한 상태로 변환
+     */
+    const switchToInputField = (e) => {
+      e.target.parentElement.innerHTML = `
+          <input class="edit_input" type="text" name="" id="">
+          <button class="edit_save_btn" type="text">Save</button>
+        `;
+    };
+    /*
+     * 할 일 수정
+     */
+    const editTodo = (e) => {
+      const editedText = e.target.parentElement.querySelector("input").value;
+      e.target.parentElement.innerHTML = `
+            <input class="todo_checkbox" type="checkbox" name="" id="" />
+            ${editedText}
+            <button class="todo_edit_btn" type="text">Edit</button>
+            <button class="todo_delete_btn" type="text">X</button>
+        `;
+    };
+    /*
+     * 할 일 삭제
+     */
+    const deleteTodo = (e) => {
+      e.target.closest("li").remove();
+      if ($todolist.querySelectorAll("li").length === 0) {
+        $todoFilter.setAttribute("disabled", "disabled");
+      } else {
+        $todoFilter.removeAttribute("disabled");
+      }
+    };
+    /*
+     * 셀렉트 옵션 선택 이벤트
+     */
+    const selectFilterOption = (e) => {
+      const todoListItem = $todolist.querySelectorAll("li");
+
+      todoListItem.forEach((el) => {
+        switch (e.target.value) {
+          case "all":
+            el.style.display = "block";
+            break;
+          case "todo":
+            el.style.display = el.dataset.status === "todo" ? "block" : "none";
+            break;
+          case "done":
+            el.style.display = el.dataset.status === "done" ? "block" : "none";
+            break;
+          default:
+        }
+      });
+    };
+  </script>
 </html>
diff --git a/simple.html b/simple.html
index 2887e44..119a82d 100644
--- a/simple.html
+++ b/simple.html
@@ -10,15 +10,41 @@
       <h1 class="title">TODO</h1>
       <div class="input-container">
         <input type="text" class="todo-input" />
-        <input type="button" value="저장" />
+        <input id="saveTodoBtn" type="button" value="저장" />
       </div>
       <div class="list-container">
-        <ul id="todo-list" class="todo-list">
-          <li>밥 먹기</li>
-          <li>2시 약속</li>
-        </ul>
+        <ul id="todo-list" class="todo-list"></ul>
       </div>
     </section>
-    <script></script>
+    <script>
+      const $todolist = document.getElementById("todo-list");
+      const $saveTodoBtn = document.getElementById("saveTodoBtn");
+      const $todoInput = document.querySelector(".todo-input");
+      let $liEl;
+      let inputText;
+
+      // 이벤트리스너 바인딩
+      $todoInput.addEventListener("input", (e) => {
+        inputText = e.target.value;
+      });
+      $todoInput.addEventListener("keydown", (e) => {
+        if (e.keyCode === 13) {
+          addTodo();
+        }
+      });
+      $saveTodoBtn.addEventListener("click", (e) => {
+        addTodo();
+      });
+
+      // 함수선언
+      const addTodo = () => {
+        if (window.confirm(`"${$todoInput.value}" 저장하시겠습니까?`)) {
+          $liEl = `<li>${inputText}</li>`;
+
+          $todolist.insertAdjacentHTML("beforeend", $liEl);
+          $todoInput.value = "";
+        }
+      };
+    </script>
   </body>
 </html>

From 6eb611d38f26add6e79fc9809005142263b3afd2 Mon Sep 17 00:00:00 2001
From: rowanna <rowankimna@gmail.com>
Date: Wed, 11 Dec 2024 09:25:49 +0900
Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=EC=9D=B8=ED=92=8B=20=EB=AF=B8?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=8B=9C=20=EB=A1=9C=EC=A7=81=EB=B3=B4?=
 =?UTF-8?q?=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 detail.html | 2 +-
 simple.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/detail.html b/detail.html
index 3bd3fe9..63eb816 100644
--- a/detail.html
+++ b/detail.html
@@ -37,7 +37,7 @@ <h1 class="title">TODO LIST</h1>
       inputText = e.target.value;
     });
     $todoInput.addEventListener("keydown", (e) => {
-      if (e.keyCode === 13) {
+      if (e.keyCode === 13 && inputText) {
         addTodo();
       }
     });
diff --git a/simple.html b/simple.html
index 119a82d..9d4f68e 100644
--- a/simple.html
+++ b/simple.html
@@ -28,7 +28,7 @@ <h1 class="title">TODO</h1>
         inputText = e.target.value;
       });
       $todoInput.addEventListener("keydown", (e) => {
-        if (e.keyCode === 13) {
+        if (e.keyCode === 13 && inputText) {
           addTodo();
         }
       });

From 59a2e10eebd324daff22dc0ec30b287bc60018b5 Mon Sep 17 00:00:00 2001
From: rowanna <rowankimna@gmail.com>
Date: Fri, 13 Dec 2024 09:30:05 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=AC=B8=EC=9E=90=EC=97=B4?=
 =?UTF-8?q?=EC=95=9E=EB=92=A4=20=EA=B3=B5=EB=B0=B1=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 detail.html | 4 ++--
 simple.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/detail.html b/detail.html
index 63eb816..f29a95a 100644
--- a/detail.html
+++ b/detail.html
@@ -34,7 +34,7 @@ <h1 class="title">TODO LIST</h1>
 
     // 이벤트리스너 바인딩
     $todoInput.addEventListener("input", (e) => {
-      inputText = e.target.value;
+      inputText = e.target.value.trim();
     });
     $todoInput.addEventListener("keydown", (e) => {
       if (e.keyCode === 13 && inputText) {
@@ -42,8 +42,8 @@ <h1 class="title">TODO LIST</h1>
       }
     });
 
+    // 동적으로 생겨난 요소이므로 이벤트위임
     $todolist.addEventListener("click", (e) => {
-      // 동적으로 생겨난 체크박스이므로 이벤트위임
       if (e.target.classList.contains("todo_checkbox")) {
         toggleCompleteTodo(e);
       }
diff --git a/simple.html b/simple.html
index 9d4f68e..c6ff6bf 100644
--- a/simple.html
+++ b/simple.html
@@ -25,7 +25,7 @@ <h1 class="title">TODO</h1>
 
       // 이벤트리스너 바인딩
       $todoInput.addEventListener("input", (e) => {
-        inputText = e.target.value;
+        inputText = e.target.value.trim();
       });
       $todoInput.addEventListener("keydown", (e) => {
         if (e.keyCode === 13 && inputText) {

From 548dfd56fbd04b993c7d72135d573979713ef9c1 Mon Sep 17 00:00:00 2001
From: rowanna <rowankimna@gmail.com>
Date: Fri, 13 Dec 2024 10:21:45 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EC=96=BC=EB=A6=AC=EB=A6=AC?=
 =?UTF-8?q?=ED=84=B4=20=EC=A0=81=EC=9A=A9,=20=EC=88=98=EC=A0=95=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B4=88=EA=B8=B0=EA=B0=92=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 detail.html | 50 +++++++++++++++++++++++++++++---------------------
 simple.html |  6 +++---
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/detail.html b/detail.html
index f29a95a..bcb52ae 100644
--- a/detail.html
+++ b/detail.html
@@ -37,31 +37,36 @@ <h1 class="title">TODO LIST</h1>
       inputText = e.target.value.trim();
     });
     $todoInput.addEventListener("keydown", (e) => {
-      if (e.keyCode === 13 && inputText) {
-        addTodo();
-      }
+      if (!(e.keyCode === 13 && inputText)) return;
+      addTodo();
     });
 
     // 동적으로 생겨난 요소이므로 이벤트위임
     $todolist.addEventListener("click", (e) => {
-      if (e.target.classList.contains("todo_checkbox")) {
-        toggleCompleteTodo(e);
-      }
-      if (e.target.classList.contains("todo_edit_btn")) {
-        switchToInputField(e);
-      }
-      if (e.target.classList.contains("edit_save_btn")) {
-        editTodo(e);
-      }
-      if (e.target.classList.contains("todo_delete_btn")) {
-        deleteTodo(e);
+      switch (e.target.className) {
+        case "todo_checkbox":
+          toggleCompleteTodo(e);
+          break;
+
+        case "todo_edit_btn":
+          switchToInputField(e);
+          break;
+
+        case "edit_save_btn":
+          editTodo(e);
+          break;
+
+        case "todo_delete_btn":
+          deleteTodo(e);
+          break;
+        default:
+          break;
       }
     });
     $todolist.addEventListener("keydown", (e) => {
-      if (e.keyCode === 13) {
-        if (e.target.classList.contains("edit_input")) {
-          editTodo(e);
-        }
+      if (e.keyCode !== 13) return;
+      if (e.target.classList.contains("edit_input")) {
+        editTodo(e);
       }
     });
     $todoFilter.addEventListener("change", (e) => {
@@ -76,7 +81,7 @@ <h1 class="title">TODO LIST</h1>
       $liEl = `
           <li data-status="todo">
             <input class="todo_checkbox" type="checkbox" name="" id="" />
-            ${inputText}
+            <span>${inputText}</span>
             <button class="todo_edit_btn" type="text">Edit</button>
             <button class="todo_delete_btn" type="text">X</button>
           </li>`;
@@ -102,8 +107,10 @@ <h1 class="title">TODO LIST</h1>
      * 할 일 수정가능한 상태로 변환
      */
     const switchToInputField = (e) => {
+      const text = e.target.parentElement.querySelector("span").textContent;
+
       e.target.parentElement.innerHTML = `
-          <input class="edit_input" type="text" name="" id="">
+          <input class="edit_input" type="text" name="" id="" value="${text}"">
           <button class="edit_save_btn" type="text">Save</button>
         `;
     };
@@ -112,9 +119,10 @@ <h1 class="title">TODO LIST</h1>
      */
     const editTodo = (e) => {
       const editedText = e.target.parentElement.querySelector("input").value;
+      if (!editedText) return;
       e.target.parentElement.innerHTML = `
             <input class="todo_checkbox" type="checkbox" name="" id="" />
-            ${editedText}
+            <span>${editedText}</span>
             <button class="todo_edit_btn" type="text">Edit</button>
             <button class="todo_delete_btn" type="text">X</button>
         `;
diff --git a/simple.html b/simple.html
index c6ff6bf..9e303c6 100644
--- a/simple.html
+++ b/simple.html
@@ -28,9 +28,8 @@ <h1 class="title">TODO</h1>
         inputText = e.target.value.trim();
       });
       $todoInput.addEventListener("keydown", (e) => {
-        if (e.keyCode === 13 && inputText) {
-          addTodo();
-        }
+        if (e.keyCode !== 13) return;
+        addTodo();
       });
       $saveTodoBtn.addEventListener("click", (e) => {
         addTodo();
@@ -38,6 +37,7 @@ <h1 class="title">TODO</h1>
 
       // 함수선언
       const addTodo = () => {
+        if (!inputText) return;
         if (window.confirm(`"${$todoInput.value}" 저장하시겠습니까?`)) {
           $liEl = `<li>${inputText}</li>`;