asac-assignments · MinJunBaek · Dec 11, 2024 · Dec 20, 2024
diff --git 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"/>
       </div>
       <div class="filter-container">
         <select id="todo-filter">
@@ -23,5 +23,114 @@ <h1 class="title">TODO LIST</h1>
       </div>
     </section>
   </body>
-  <script></script>
+  <script>
+    // JavaScript code for the TODO List functionality
+
+document.addEventListener("DOMContentLoaded", () => {
+    const todoInput = document.querySelector(".todo-input");
+    const todoList = document.getElementById("todo-list");
+    const todoFilter = document.getElementById("todo-filter");
+
+    let todos = [];
+
+    // Function to render the TODO list
+    function renderTodos(filter = "all") {
+      todoList.innerHTML = ""; // Clear the list
+      let filteredTodos = todos;
+
+      if (filter === "todo") {
+        filteredTodos = todos.filter((todo) => !todo.completed);
+      } else if (filter === "done") {
+        filteredTodos = todos.filter((todo) => todo.completed);
+      }
+
+      filteredTodos.forEach((todo, index) => {
+        const li = document.createElement("li");
+        li.className = "todo-item";
+
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.checked = todo.completed;
+        checkbox.addEventListener("click", () => toggleTodoStatus(index));
+
+        const span = document.createElement("span");
+        span.textContent = todo.text;
+        if (todo.completed) {
+          span.style.textDecoration = "line-through";
+        }
+
+        const editButton = document.createElement("button");
+        editButton.textContent = "Edit";
+        editButton.addEventListener("click", () => editTodo(index));
+
+        const deleteButton = document.createElement("button");
+        deleteButton.textContent = "X";
+        deleteButton.addEventListener("click", () => deleteTodo(index));
+
+        li.appendChild(checkbox);
+        li.appendChild(span);
+        li.appendChild(editButton);
+        li.appendChild(deleteButton);
+        todoList.appendChild(li);
+      });
+    }
+
+    // Function to add a TODO
+    function addTodo(text) {
+      todos.push({ text, completed: false });
+      renderTodos(todoFilter.value);
+    }
+
+    // Function to toggle the completion status of a TODO
+    function toggleTodoStatus(index) {
+      todos[index].completed = !todos[index].completed;
+      renderTodos(todoFilter.value);
+    }
+
+    // Function to edit a TODO
+    function editTodo(index) {
+      const li = todoList.children[index];
+      const currentText = todos[index].text;
+
+      const input = document.createElement("input");
+      input.type = "text";
+      input.value = currentText;
+
+      const saveButton = document.createElement("button");
+      saveButton.textContent = "Save";
+
+      saveButton.addEventListener("click", () => {
+        todos[index].text = input.value;
+        renderTodos(todoFilter.value);
+      });
+
+      li.innerHTML = ""; // Clear current list item
+      li.appendChild(input);
+      li.appendChild(saveButton);
+    }
+
+    // Function to delete a TODO
+    function deleteTodo(index) {
+      todos.splice(index, 1);
+      renderTodos(todoFilter.value);
+    }
+
+    // Event listener for adding a TODO via Enter key
+    todoInput.addEventListener("keyup", (event) => {
+      if (event.key === "Enter" && todoInput.value.trim() !== "") {
+        addTodo(todoInput.value.trim());
+        todoInput.value = ""; // Clear the input
+      }
+    });
+
+    // Event listener for filtering TODOs
+    todoFilter.addEventListener("change", (event) => {
+      renderTodos(event.target.value);
+    });
+
+    // Initial rendering
+    renderTodos();
+  });
+
+  </script>
 </html>
diff --git a/simple.html b/simple.html
@@ -1,24 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simple TODO List</title>
-  </head>
-  <body>
-    <section id="container">
-      <h1 class="title">TODO</h1>
-      <div class="input-container">
-        <input type="text" class="todo-input" />
-        <input type="button" value="저장" />
-      </div>
-      <div class="list-container">
-        <ul id="todo-list" class="todo-list">
-          <li>밥 먹기</li>
-          <li>2시 약속</li>
-        </ul>
-      </div>
+    <script src="./simple.js"></script>
+    <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+    <section id = "container">
+        <h1 class="title">TODO</h1>
+        <div class="input-container">
+            <!-- onkeydown 키보드 입력받는 속성 -->
+            <input type="text" class="todo-input" onkeydown="keyCodeCheck()"/>
+            <!-- onclick 클릭시 입력받는 속성 -->
+            <input type="button" value="저장" onclick="buttonCheck()"/>
+        </div>
+        <div class="list-container">
+            <ul id="todo-list" class="todo-list">
+                <li>밥 먹기</li>
+                <li>2시 약속</li>
+            </ul>
+        </div>
     </section>
-    <script></script>
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/simple.js b/simple.js
@@ -0,0 +1,34 @@
+function keyCodeCheck(){
+    // 엔터키를 사용하거나, 빈 내용이 아니면 아래 코드를 실행
+    if(window.event.keyCode === 13 && document.querySelector('.todo-input').value.trim() !== ''){
+        // 생성하는 메서드
+        addToDo();
+    }
+}
+
+function buttonCheck(){
+    // 버튼클릭시 입력창의 요소가 빈 내용이 아니면 아래 코드를 실행
+    if(document.querySelector('.todo-input').value.trim() !== ''){
+        // 생성하는 메서드
+        addToDo();
+    }
+}
+
+function addToDo(){
+    const todoInput = document.querySelector('.todo-input');
+    const todoList = document.querySelector('.todo-list');
+
+    if(confirm(`"${todoInput.value.trim()}" 저장하시겠습니까?`)){
+        // li 요소 생성
+        const newLi = document.createElement('li');
+
+        // 생성된 li 요소에 내용 추가
+        newLi.textContent = todoInput.value;
+
+        // todoList에 li요소 추가
+        todoList.appendChild(newLi);
+    }
+
+    // input값 초기화
+    todoInput.value = '';
+}