김형정 simple.html 제출합니다

de_js.js

@@ -0,0 +1,158 @@
+const myStorage = window.localStorage;
+let currentNumber = 0;
+let todos = [];
+const selectChecked = document.getElementById('todo-filter');
+const ulDocument = document.getElementById('todo-list');
+const inputDocument=document.getElementById('todo-input');
+
+window.addEventListener('load', () => {
+    const savedTodos = JSON.parse(myStorage.getItem('todos')) || [];
+    todos = savedTodos;
+    if(todos.length > 0) {
+        currentNumber = Math.max(...todos.map(t => Number.parseInt(t.id.replace('li','')))) + 1;
+    }
+    renderTodos();
+});
+
+document.addEventListener("keydown", e => {
+    console.log(myStorage);
+    if (!(e.code === "Enter" && e.isComposing === false)) return;
+    const valueOfToDoList = document.getElementsByClassName("todo-input")[0].value.trim();
+    if(valueOfToDoList === "") return;
+    saveToDoList(valueOfToDoList);
+    document.getElementsByClassName("todo-input")[0].value = "";
+});
+
+selectChecked.addEventListener("change", e => {
+    filterTodos(e.target.value);
+});
+
+ulDocument.addEventListener("click", (e) => {
+    if (e.target.value === "X") {
+        deleteToDoList(e);
+    }
+    else if (e.target.value === "Edit") {
+        editToDoList(e);
+    }
+    else if (e.target.value === "Save") {
+        saveEditedToDoList(e);
+    }
+    else if (e.target.className === "CheckBox") {
+        updateCheckState(e);
+    }
+});
+
+function saveToDoList(text) {
+    const currentLi = `li${currentNumber}`;
+    const newTodo = {
+        id: currentLi,
+        text: text,
+        checked: false
+    };
+    todos.push(newTodo);
+    currentNumber++;
+    storeTodos();
+    renderTodos();
+}
+
+function deleteToDoList(e) {
+    const liId = e.target.parentNode.getAttribute('id');
+    todos = todos.filter(todo => todo.id !== liId);
+    storeTodos();
+    renderTodos();
+}
+
+function editToDoList(e) {
+    const buttonParent = e.target.parentNode;
+    const liId = buttonParent.id;
+    const currentTodo = todos.find(todo => todo.id === liId);
+    const currentText = currentTodo.text;
+
+    buttonParent.innerHTML = "";
+
+    const inputText = document.createElement("input");
+    inputText.setAttribute("type", "text");
+    inputText.setAttribute("id", "saveInput");
+    inputText.value = currentText;
+    buttonParent.appendChild(inputText);
+
+    const buttonToSave = document.createElement("input");
+    buttonToSave.setAttribute("type", "button");
+    buttonToSave.setAttribute("value", "Save");
+    buttonParent.appendChild(buttonToSave);
+}
+
+function saveEditedToDoList(e) {
+    const buttonParent = e.target.parentNode;
+    const currentId = buttonParent.getAttribute("id");
+    const updatedText = document.getElementById("saveInput").value;
+
+    const todoIndex = todos.findIndex(todo => todo.id === currentId);
+    if(todoIndex > -1) {
+        todos[todoIndex].text = updatedText;
+    }
+
+    storeTodos();
+    renderTodos();
+}
+
+function updateCheckState(e) {
+    const checkbox = e.target;
+    const liId = checkbox.parentNode.getAttribute('id');
+    const todoIndex = todos.findIndex(todo => todo.id === liId);
+    if (todoIndex > -1) {
+        todos[todoIndex].checked = checkbox.checked;
+        storeTodos();
+        filterTodos(selectChecked.value);
+    }
+}
+
+function storeTodos() {
+    myStorage.setItem('todos', JSON.stringify(todos));
+}
+
+function renderTodos() {
+    ulDocument.innerHTML = "";
+    // biome-ignore lint/complexity/noForEach: <explanation>
+    todos.forEach(todo => {
+        const li = document.createElement("li");
+        li.setAttribute("id", todo.id);
+
+        const listCheckBox = document.createElement("input");
+        listCheckBox.setAttribute('class','CheckBox');
+        listCheckBox.setAttribute("type", "checkbox");
+        if(todo.checked) listCheckBox.setAttribute('checked',true);
+        li.appendChild(listCheckBox);
+
+        li.appendChild(document.createTextNode(todo.text));
+
+        const buttonToAdd = document.createElement("input");
+        buttonToAdd.setAttribute("type", "button");
+        buttonToAdd.setAttribute("value", "Edit");
+        li.appendChild(buttonToAdd);
+
+        const buttonToDelete = document.createElement("input");
+        buttonToDelete.setAttribute("type", "button");
+        buttonToDelete.setAttribute("value", "X");
+        li.appendChild(buttonToDelete);
+
+        ulDocument.appendChild(li);
+    });
+    filterTodos(selectChecked.value);
+}
+
+function filterTodos(filterValue) {
+    const liItems = ulDocument.querySelectorAll('li');
+    // biome-ignore lint/complexity/noForEach: <explanation>
+    liItems.forEach(li => {
+        const todo = todos.find(t => t.id === li.id);
+        if(!todo) return;
+        if(filterValue === 'all') {
+            li.style.display = "";
+        } else if(filterValue === 'todo') {
+            li.style.display = todo.checked ? 'none' : '';
+        } else if(filterValue === 'done') {
+            li.style.display = todo.checked ? '' : 'none';
+        }
+    });
+}

detail.html

@@ -1,27 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Detail TODO List</title>
-  </head>
-  <body>
+</head>
+<body>
     <section id="container">
-      <h1 class="title">TODO LIST</h1>
-      <div class="input-container">
-        <input type="text" class="todo-input" />
-      </div>
-      <div class="filter-container">
-        <select id="todo-filter">
-          <option value="all">전체</option>
-          <option value="todo">할일</option>
-          <option value="done">완료</option>
-        </select>
-      </div>
-      <div class="list-container">
-        <ul id="todo-list" class="todo-list"></ul>
-      </div>
+        <h1 class="title">TODO LIST</h1>
+        <div class="input-container">
+            <input type="text" class="todo-input" />
+        </div>
+        <div class="filter-container">
+            <select id="todo-filter">
+                <option value="all">전체</option>
+                <option value="todo">할일</option>
+                <option value="done">완료</option>
+            </select>
+        </div>
+        <div class="list-container">
+            <ul id="todo-list" class="todo-list"></ul>
+        </div>
     </section>
-  </body>
-  <script></script>
-</html>
+</body>
+<script src="de_js.js">
+</script>
+</html>

simple.html

@@ -10,15 +10,27 @@
       <h1 class="title">TODO</h1>
       <div class="input-container">
         <input type="text" class="todo-input" />
-        <input type="button" value="저장" />
+        <input type="button" onclick="saveToDoList()" value="저장" />
       </div>
       <div class="list-container">
         <ul id="todo-list" class="todo-list">
-          <li>밥 먹기</li>
-          <li>2시 약속</li>
+          <li id='w'>
+            밥 먹기
+          </li>
+          <li>
+            2시 약속
+          </li>
         </ul>
       </div>
     </section>
-    <script></script>
+    <script>
+        function saveToDoList(){
+            const valueOfToDoList=document.getElementsByClassName('todo-input');
+            const todoList=document.getElementById('todo-list');
+            let list=document.createElement('li');
+            list.innerText=valueOfToDoList[0].value;
+            todoList.appendChild(list);
+        }
+    </script>
   </body>
 </html>