From 8f43ff72c122bd2dd5a45f8e23de2ccf0abdd03b Mon Sep 17 00:00:00 2001 From: jingjing2222 <131797378+jingjing2222@users.noreply.github.com> Date: Tue, 10 Dec 2024 13:17:23 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=EA=B9=80=ED=98=95=EC=A0=95=20simple.html?= =?UTF-8?q?=20=EC=A0=9C=EC=B6=9C=ED=95=A9=EB=8B=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple.html | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/simple.html b/simple.html index 2887e44..abc0eab 100644 --- a/simple.html +++ b/simple.html @@ -10,15 +10,27 @@

TODO

- +
- + From 7f4ee136d4fee59bbb4d1e92806829fa74783052 Mon Sep 17 00:00:00 2001 From: jingjing2222 <131797378+jingjing2222@users.noreply.github.com> Date: Tue, 10 Dec 2024 18:07:06 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=EA=B9=80=ED=98=95=EC=A0=95=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- detail.html | 195 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 175 insertions(+), 20 deletions(-) diff --git a/detail.html b/detail.html index 160571b..6f6e268 100644 --- a/detail.html +++ b/detail.html @@ -1,27 +1,182 @@ - + + Detail TODO List - - + + +
-

TODO LIST

-
- -
-
- -
-
- -
+

TODO LIST

+
+ +
+
+ +
+
+ +
- - - + + + \ No newline at end of file From fbbfad9e9b2c13f1c27c5a1df9bf5a0c73055f40 Mon Sep 17 00:00:00 2001 From: jingjing2222 <131797378+jingjing2222@users.noreply.github.com> Date: Tue, 10 Dec 2024 18:08:46 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=EA=B9=80=ED=98=95=EC=A0=95=20detail.html?= =?UTF-8?q?=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- detail.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/detail.html b/detail.html index 6f6e268..1c45bbd 100644 --- a/detail.html +++ b/detail.html @@ -143,7 +143,7 @@

TODO LIST

const buttonToSave = document.createElement("input"); buttonToSave.setAttribute("type", "button"); buttonToSave.setAttribute("value", "Save"); - buttonToSave.setAttribute("data-id", currentId); // 현재 li ID 저장 + buttonToSave.setAttribute("data-id", currentId); buttonParent.appendChild(buttonToSave); } From 78a1aed00db535b2d9d684399099b193101350e1 Mon Sep 17 00:00:00 2001 From: jingjing2222 <131797378+jingjing2222@users.noreply.github.com> Date: Fri, 13 Dec 2024 11:16:47 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=EC=95=88=EC=93=B0=EB=8D=98=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=ED=95=98=EB=82=98=EB=A7=8C=20=EC=A7=80=EC=9B=A0?= =?UTF-8?q?=EC=96=B4=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- detail.html | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/detail.html b/detail.html index 1c45bbd..7d535a0 100644 --- a/detail.html +++ b/detail.html @@ -25,6 +25,7 @@

TODO LIST

+ + \ No newline at end of file From 3923e96d79f920b05650bfb375427c1ca1895af8 Mon Sep 17 00:00:00 2001 From: jingjing2222 <131797378+jingjing2222@users.noreply.github.com> Date: Fri, 13 Dec 2024 14:04:36 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- detail.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/detail.html b/detail.html index 7d535a0..1cca9a4 100644 --- a/detail.html +++ b/detail.html @@ -95,9 +95,9 @@

TODO LIST

const listCheckBox = document.createElement("input"); listCheckBox.setAttribute('class','CheckBox'); const currentBox="box"+currentNumber; - listCheckBox.setAttribute(); isChecked[currentBox]=false; - listCheckBox.setAttribute("type", "checkbox",'id',currentBox); + listCheckBox.setAttribute("id", "currentbox"); + listCheckBox.setAttribute("type", "checkbox"); list.appendChild(listCheckBox); list.appendChild(listTextNode); From 29416a6b6a7ce5e1c0e87716cfe9d9df5dc8d457 Mon Sep 17 00:00:00 2001 From: jingjing2222 <131797378+jingjing2222@users.noreply.github.com> Date: Fri, 13 Dec 2024 16:00:03 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=EC=B5=9C=EC=B5=9C=EC=B5=9C=EC=B5=9C?= =?UTF-8?q?=EC=B5=9C=EC=A2=85..?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- detail.html | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/detail.html b/detail.html index 1cca9a4..630f521 100644 --- a/detail.html +++ b/detail.html @@ -32,24 +32,20 @@

TODO LIST

const selectChecked = document.getElementById('todo-filter'); document.addEventListener("keydown", e => { - if (e.code === "Enter" && e.isComposing === false) { - const valueOfToDoList = document.getElementsByClassName("todo-input"); + if (!(e.code === "Enter" && e.isComposing === false)) return; + const valueOfToDoList = document.getElementsByClassName("todo-input"); const listTextNode = document.createTextNode(valueOfToDoList[0].value); saveToDoList(listTextNode); valueOfToDoList[0].value = ""; - } }); + selectChecked.addEventListener("change", e => { const ulParent = document.getElementById("todo-list"); let liChild=ulParent.firstChild; while(liChild!==null){ const checkbox = liChild.querySelector('.CheckBox'); - if (!checkbox) { - liChild = liChild.nextElementSibling; - continue; - } if(e.target.value==='all'){ liChild.setAttribute('style',''); } @@ -84,7 +80,7 @@

TODO LIST

else li.setAttribute('style','display:none'); } else if (selectChecked.value === 'done') { if (checkbox.checked) li.setAttribute('style','display'); - else li.setAttribute('style','display'); + else li.setAttribute('style','display:none'); } } }); @@ -134,22 +130,20 @@

TODO LIST

const inputText = document.createElement("input"); inputText.setAttribute("type", "text"); - inputText.setAttribute("id", "save-input"); + inputText.setAttribute("id", "saveInput"); buttonParent.appendChild(inputText); const buttonToSave = document.createElement("input"); buttonToSave.setAttribute("type", "button"); buttonToSave.setAttribute("value", "Save"); - buttonToSave.setAttribute("data-id", currentId); buttonParent.appendChild(buttonToSave); - } function saveEditedToDoList(e) { const buttonParent = e.target.parentNode; - const currentId = e.target.getAttribute("data-id"); - const updatedText = document.getElementById("save-input").value; + const currentId = buttonParent.getAttribute("id"); + const updatedText = document.getElementById("saveInput").value; const currentBox="box"+currentId[currentId.length-1]; const list = document.getElementById(currentId); @@ -158,8 +152,9 @@

TODO LIST

const listCheckBox = document.createElement("input"); listCheckBox.setAttribute("type", "checkbox"); listCheckBox.setAttribute("class", "CheckBox"); - listCheckBox.setAttribute('id',currentBox); - if(isChecked[currentBox]===true) listCheckBox.setAttribute('checked','true') + listCheckBox.setAttribute('id',`${currentBox}`); + if(isChecked[currentBox]===true) listCheckBox.setAttribute('checked','true'); + else listCheckBox.setAttribute('checked','false'); list.appendChild(listCheckBox); list.appendChild(document.createTextNode(updatedText)); @@ -176,4 +171,5 @@

TODO LIST

} - \ No newline at end of file + + From ddcb7dbc4410248367b5f337b80f444685f17c4c Mon Sep 17 00:00:00 2001 From: jingjing2222 <131797378+jingjing2222@users.noreply.github.com> Date: Tue, 24 Dec 2024 09:13:34 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=EB=A1=9C=EC=BB=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EB=A6=AC=EC=A7=80=20=EC=B6=94=EA=B0=80=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- de_js.js | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++ detail.html | 153 +------------------------------------------------- 2 files changed, 161 insertions(+), 150 deletions(-) create mode 100644 de_js.js diff --git a/de_js.js b/de_js.js new file mode 100644 index 0000000..8328db1 --- /dev/null +++ b/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: + 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: + 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'; + } + }); +} \ No newline at end of file diff --git a/detail.html b/detail.html index 630f521..66c70b2 100644 --- a/detail.html +++ b/detail.html @@ -1,12 +1,10 @@ - - + Detail TODO List -

TODO LIST

@@ -25,151 +23,6 @@

TODO LIST

- - - - - + \ No newline at end of file