[나원지] feat: 초급, 중급 todolist 구현

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,141 @@ <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.trim();
+    });
+    $todoInput.addEventListener("keydown", (e) => {
+      if (!(e.keyCode === 13 && inputText)) return;
+      addTodo();
+    });
+
+    // 동적으로 생겨난 요소이므로 이벤트위임
+    $todolist.addEventListener("click", (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) return;
+      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="" />
+            <span>${inputText}</span>
+            <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) => {
+      const text = e.target.parentElement.querySelector("span").textContent;
+
+      e.target.parentElement.innerHTML = `
+          <input class="edit_input" type="text" name="" id="" value="${text}"">
+          <button class="edit_save_btn" type="text">Save</button>
+        `;
+    };
+    /*
+     * 할 일 수정
+     */
+    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="" />
+            <span>${editedText}</span>
+            <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>

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.trim();
+      });
+      $todoInput.addEventListener("keydown", (e) => {
+        if (e.keyCode !== 13) return;
+        addTodo();
+      });
+      $saveTodoBtn.addEventListener("click", (e) => {
+        addTodo();
+      });
+
+      // 함수선언
+      const addTodo = () => {
+        if (!inputText) return;
+        if (window.confirm(`"${$todoInput.value}" 저장하시겠습니까?`)) {
+          $liEl = `<li>${inputText}</li>`;
+
+          $todolist.insertAdjacentHTML("beforeend", $liEl);
+          $todoInput.value = "";
+        }
+      };
+    </script>
   </body>
 </html>