From a4162d2d2c3c505d3fec0f193eacf29a2c73073e Mon Sep 17 00:00:00 2001
From: Winter025 <114202504+Winter025@users.noreply.github.com>
Date: Fri, 13 Dec 2024 09:31:11 +0900
Subject: [PATCH 1/2] Add files via upload

---
 detail.html | 162 +++++++++++++++++++++++++++++++++++++++++++---------
 simple.html |  67 ++++++++++++++--------
 2 files changed, 178 insertions(+), 51 deletions(-)
diff --git a/detail.html b/detail.html
index 160571b..13b9b44 100644
--- a/detail.html
+++ b/detail.html
@@ -1,27 +1,135 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Detail TODO List</title>
-  </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>
-    </section>
-  </body>
-  <script></script>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Detail TODO List</title>
+</head>
+
+
+<body>
+    <section id="container">
+
+        <h1 class="title">TODO LIST</h1>
+
+        <div class="input-container">
+            <input type="text" class="todo-input" onKeypress="createList(event)" />
+        </div>
+
+        <div class="filter-container">
+            <select id="todo-filter" onChange="changeSelect()">
+                <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>
+    function createList(e) {
+        const list = document.getElementById("todo-list");
+        const add = document.querySelector(".todo-input").value;
+        let li = document.createElement('li');
+
+        const checkBox = document.createElement('input');
+
+        const editBtn = document.createElement('button');
+        const edit = document.createTextNode('Edit');
+
+        const deleteBtn = document.createElement('button');
+        const del = document.createTextNode('X');
+
+        const saveBtn = document.createElement('button');
+        const save= document.createTextNode('save');
+
+        li.innerText = add;
+
+        checkBox.type = 'checkbox';
+
+        editBtn.appendChild(edit);
+        editBtn.addEventListener("click", () => {
+            checkBox.setAttribute("type", "text");
+            editBtn.style.display = 'none';
+            deleteBtn.style.display = 'none';
+            saveBtn.style.visibility ='visible';
+            li.childNodes[1].nodeValue = '';
+        });
+
+        deleteBtn.appendChild(del);
+        deleteBtn.addEventListener("click", () => {
+            li.remove();
+        });
+
+        saveBtn.appendChild(save);
+        saveBtn.style.visibility ='hidden';
+        saveBtn.addEventListener("click", () => {
+            li.childNodes[1].nodeValue = checkBox.value;
+
+            checkBox.setAttribute("type", "checkbox");
+            saveBtn.style.visibility ='hidden';
+            editBtn.style.display = 'inline-block';
+            deleteBtn.style.display = 'inline-block';
+        });
+
+        if (e.code == 'Enter') {
+            li.prepend(checkBox);
+            li.appendChild(saveBtn);
+            li.appendChild(editBtn);
+            li.appendChild(deleteBtn);
+            list.appendChild(li);
+        }
+    }
+
+
+
+
+    function changeSelect() {
+        const list = document.getElementById("todo-list");
+        var opt = document.getElementById("todo-filter");
+        var optVal = opt.options[opt.selectedIndex].value;
+        const li = list.getElementsByTagName('li');
+
+        console.log('length: ' + li.length);
+
+
+
+        for (let i = 0; i < li.length; i++) {
+            const isChecked = li[i].querySelector('input[type="checkbox"]').checked;
+    
+            switch (optVal) {
+                case 'all':
+                    li[i].style.display = '';
+                    break;
+    
+                case 'todo':
+                    if (isChecked) {
+                        li[i].style.display = 'none';
+                    }
+                    else {
+                        li[i].style.display = '';
+                    }
+                    break;
+    
+                case 'done':
+                    if (isChecked) {
+                        li[i].style.display = '';
+                    }
+                    else {
+                        li[i].style.display = 'none';
+                    }
+                    break;
+            }
+        }
+    }
+</script>
+
+</html>
\ No newline at end of file
diff --git a/simple.html b/simple.html
index 2887e44..b906b1e 100644
--- a/simple.html
+++ b/simple.html
@@ -1,24 +1,43 @@
-<!DOCTYPE html>
-<html lang="en">
-  <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>
-    </section>
-    <script></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+
+<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="저장" onClick="addList()" />
+		</div>
+
+		<div class="list-container">
+			<ul id="todo-list" class="todo-list">
+				<li>밥 먹기</li>
+				<li>2시 약속</li>
+			</ul>
+		</div>
+	</section>
+
+	<script>
+		function addList() {
+			const list = document.getElementById("todo-list");
+			const add = document.querySelector(".todo-input").value;
+			let li = document.createElement('li');
+
+			li.innerText = add;
+
+			confirm('"' + add + '"' + ' 저장하시겠습니끼?');
+			list.appendChild(li);
+		}
+	</script>
+</body>
+
+</html>
\ No newline at end of file

From 512bd3db2d7fa0be1097f111fd67c5ce4ef67f6a Mon Sep 17 00:00:00 2001
From: Winter025 <114202504+Winter025@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:49:08 +0900
Subject: [PATCH 2/2] use Local Storage

---
 detail.html | 126 +++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 105 insertions(+), 21 deletions(-)

diff --git a/detail.html b/detail.html
index 13b9b44..eded31f 100644
--- a/detail.html
+++ b/detail.html
@@ -35,27 +35,101 @@ <h1 class="title">TODO LIST</h1>
 
 
 <script>
-    function createList(e) {
+    const getStorgeItem = JSON.parse(localStorage.getItem("item"));
+    itemArr = [];
+
+    if (getStorgeItem != '') {
+        getStorgeItem.forEach((e) => { 
+            itemArr.push(e);
+            getList(e);
+        })
+    }
+
+
+
+    function createBtn(name) {
+        const btn = document.createElement('button');
+        const btnName = document.createTextNode(name);
+        btn.appendChild(btnName);
+        return btn;
+    }
+
+
+
+    function getList(e) {
         const list = document.getElementById("todo-list");
-        const add = document.querySelector(".todo-input").value;
         let li = document.createElement('li');
 
         const checkBox = document.createElement('input');
 
-        const editBtn = document.createElement('button');
-        const edit = document.createTextNode('Edit');
+        const editBtn = createBtn('Edit');
+        const deleteBtn = createBtn('X');
+        const saveBtn = createBtn('save');
 
-        const deleteBtn = document.createElement('button');
-        const del = document.createTextNode('X');
+        var history = e;
 
-        const saveBtn = document.createElement('button');
-        const save= document.createTextNode('save');
+        li.innerText = e;
+        
+        checkBox.type = 'checkbox';
 
-        li.innerText = add;
+        editBtn.addEventListener("click", () => {
+            checkBox.setAttribute("type", "text");
+            editBtn.style.display = 'none';
+            deleteBtn.style.display = 'none';
+            saveBtn.style.visibility ='visible';
+            li.childNodes[1].nodeValue = '';
+        });
+
+        deleteBtn.addEventListener("click", () => {
+            let deleteStorgeItem = JSON.parse(localStorage.getItem("item"));
+            const storgeItem = deleteStorgeItem.filter(deleteItem => deleteItem !== history);
+            localStorage.setItem("item", JSON.stringify(storgeItem));
+            li.remove();
+        });
+
+        saveBtn.style.visibility ='hidden';
+        saveBtn.addEventListener("click", () => {
+            li.childNodes[1].nodeValue = checkBox.value;
+
+            let editStorgeItem = JSON.parse(localStorage.getItem("item"));
+            const itemIndex = editStorgeItem.findIndex(editItem => editItem == history);
+            editStorgeItem[itemIndex] = checkBox.value;
+            localStorage.setItem("item", JSON.stringify(editStorgeItem));
+            history = checkBox.value;
 
+            checkBox.setAttribute("type", "checkbox");
+            saveBtn.style.visibility ='hidden';
+            editBtn.style.display = 'inline-block';
+            deleteBtn.style.display = 'inline-block';
+        });
+
+        li.prepend(checkBox);
+        li.appendChild(saveBtn);
+        li.appendChild(editBtn);
+        li.appendChild(deleteBtn);
+        list.appendChild(li);
+
+    }
+
+
+    function createList(e) {
+        if (e.code != 'Enter') { return; }
+
+        const list = document.getElementById("todo-list");
+        const add = document.querySelector(".todo-input").value;
+        let li = document.createElement('li');
+
+        const checkBox = document.createElement('input');
+
+        const editBtn = createBtn('Edit');
+        const deleteBtn = createBtn('X');
+        const saveBtn = createBtn('save');
+
+        var history = add;
+        li.innerText = add;
+        
         checkBox.type = 'checkbox';
 
-        editBtn.appendChild(edit);
         editBtn.addEventListener("click", () => {
             checkBox.setAttribute("type", "text");
             editBtn.style.display = 'none';
@@ -64,29 +138,41 @@ <h1 class="title">TODO LIST</h1>
             li.childNodes[1].nodeValue = '';
         });
 
-        deleteBtn.appendChild(del);
         deleteBtn.addEventListener("click", () => {
+            let deleteStorgeItem = JSON.parse(localStorage.getItem("item"));
+            const storgeItem = deleteStorgeItem.filter(deleteItem => deleteItem !== history);
+            localStorage.setItem("item", JSON.stringify(storgeItem));
             li.remove();
         });
 
-        saveBtn.appendChild(save);
         saveBtn.style.visibility ='hidden';
         saveBtn.addEventListener("click", () => {
             li.childNodes[1].nodeValue = checkBox.value;
 
+            let editStorgeItem = JSON.parse(localStorage.getItem("item"));
+            const itemIndex = editStorgeItem.findIndex(editItem => editItem == history);
+            editStorgeItem[itemIndex] = checkBox.value;
+            localStorage.setItem("item", JSON.stringify(editStorgeItem));
+            history = checkBox.value;
+
             checkBox.setAttribute("type", "checkbox");
             saveBtn.style.visibility ='hidden';
             editBtn.style.display = 'inline-block';
             deleteBtn.style.display = 'inline-block';
         });
 
-        if (e.code == 'Enter') {
-            li.prepend(checkBox);
-            li.appendChild(saveBtn);
-            li.appendChild(editBtn);
-            li.appendChild(deleteBtn);
-            list.appendChild(li);
-        }
+        itemArr.push(li.innerText);
+        localStorage.setItem("item", JSON.stringify(itemArr));
+
+
+
+        li.prepend(checkBox);
+        li.appendChild(saveBtn);
+        li.appendChild(editBtn);
+        li.appendChild(deleteBtn);
+        list.appendChild(li);
+
+        document.querySelector(".todo-input").value = "";
     }
 
 
@@ -100,8 +186,6 @@ <h1 class="title">TODO LIST</h1>
 
         console.log('length: ' + li.length);
 
-
-
         for (let i = 0; i < li.length; i++) {
             const isChecked = li[i].querySelector('input[type="checkbox"]').checked;
     
