From 13a6e7cd34fcc38a6f52ed9eae4d479eac26680c Mon Sep 17 00:00:00 2001 From: hongjungwook1 Date: Tue, 10 Dec 2024 17:19:20 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=EC=B4=88=EA=B8=89=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DetailJs.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++ SimpleJs.js | 24 ++++++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 DetailJs.js create mode 100644 SimpleJs.js diff --git a/DetailJs.js b/DetailJs.js new file mode 100644 index 0000000..8a7dd66 --- /dev/null +++ b/DetailJs.js @@ -0,0 +1,57 @@ + +function show_text(event) { + + //const filter = document.getElementById('todo-filter').value; + const createLi = document.createElement('li'); + const setInput = document.getElementsByClassName('todo-input')[0].value; + const checkBox = document.createElement("input"); + checkBox.type ="checkbox"; + + if(event.keyCode == 13){ + createLi.append(checkBox) + createLi.append(setInput.innerHTML = setInput) + document + .getElementById('todo-list') + .appendChild(createLi) + } + + } + + function todoFilter(value) { + + + // li 개수 + const todoList = document.querySelectorAll('#todo-list li'); + // filter 확인 + const checkValues = document.getElementById("todo-filter").value; + + if (checkValues == "all") { + + } + else if (checkValues == "todo") { + for (let i = 0; i < todoList.length; i++) { + + + + + + console.log(todoList[i].value(checked)); + } + + + alert("123123123"); + } + else { + alert("1asdasdasdas"); + } + + + + } + + + + + + + diff --git a/SimpleJs.js b/SimpleJs.js new file mode 100644 index 0000000..7d27454 --- /dev/null +++ b/SimpleJs.js @@ -0,0 +1,24 @@ + +function btnClick() { + + const createLi = document.createElement('li'); + const getInput = document.getElementsByClassName('todo-input')[0].value; + const textNode = document.createTextNode(getInput); + const checkConfirm = confirm('\" ' + getInput + ' \" 저장 하시겠습니까 ?'); + + if (!getInput.trim()) { + alert("공백 추가 x"); + return false; + } + + if (checkConfirm) { + createLi.appendChild(textNode); + document + .getElementById('todo-list') + .appendChild(createLi); + } + else { + alert("저장 하지 않으셨습니다."); + } + +} \ No newline at end of file From 54742ed94049053fbe98b50fa0fc2cf0b539621e Mon Sep 17 00:00:00 2001 From: hongjungwook1 Date: Fri, 13 Dec 2024 09:28:49 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[=ED=99=8D=EC=A0=95=EC=9A=B1]=20=EC=B4=88?= =?UTF-8?q?=EA=B8=89=20,=20=EC=A4=91=EA=B8=89=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=EC=9E=85=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DetailJs.js | 130 ++++++++++++++++++++++++++++++++++++---------------- SimpleJs.js | 1 + detail.html | 6 +-- simple.html | 4 +- 4 files changed, 97 insertions(+), 44 deletions(-) diff --git a/DetailJs.js b/DetailJs.js index 8a7dd66..56ea1c0 100644 --- a/DetailJs.js +++ b/DetailJs.js @@ -1,57 +1,109 @@ - function show_text(event) { - - //const filter = document.getElementById('todo-filter').value; + //Li 생성 const createLi = document.createElement('li'); + + //set text value const setInput = document.getElementsByClassName('todo-input')[0].value; + + // Check Box 생성 const checkBox = document.createElement("input"); checkBox.type ="checkbox"; - - if(event.keyCode == 13){ - createLi.append(checkBox) - createLi.append(setInput.innerHTML = setInput) - document - .getElementById('todo-list') - .appendChild(createLi) - } - + checkBox.classList.add('todoCheck'); + + // Edit 버튼 생성 + const createEdit = document.createElement("button"); + createEdit.innerHTML = 'Edit'; + createEdit.classList.add("editBtn"); + + // Save 버튼 생성 + const createSave = document.createElement("button"); + createSave.innerHTML = 'Save'; + createSave.classList.add("saveBtn"); + createSave.style.display = "none"; + + // X 버튼 생성 + const createXbtn = document.createElement("button"); + createXbtn.innerHTML = 'X'; + createXbtn.type = "button"; + + // 기본 Span 생성 + const createSpan = document.createElement("span"); + createSpan.append(setInput); + + // 수정 시 사용되는 Input text 생성 + const editInput = document.createElement('input'); + editInput.type = 'text'; + editInput.id = 'editInput'; + + // 수정 시 사용되는 Span 생성 + const editSpan = document.createElement("span"); + editSpan.append(editInput); + + if (!setInput.trim()) { + alert("공백 추가 x"); + return false; } - function todoFilter(value) { - + if(event.key === 'Enter') { + createLi.append(checkBox) + createLi.append(createSpan) + document + .getElementById('todo-list') + .appendChild(createLi) + .append(createEdit , createSave , createXbtn) + } - // li 개수 - const todoList = document.querySelectorAll('#todo-list li'); - // filter 확인 - const checkValues = document.getElementById("todo-filter").value; + createXbtn.addEventListener('click', function() { + createLi.remove(); + }); - if (checkValues == "all") { - - } - else if (checkValues == "todo") { - for (let i = 0; i < todoList.length; i++) { - - - - - - console.log(todoList[i].value(checked)); - } - + createEdit.addEventListener('click' , function() { + createEdit.style.display = "none"; + createSave.style.display = "inline"; + + createLi.replaceChild(editSpan , createSpan); - alert("123123123"); - } - else { - alert("1asdasdasdas"); - } - - + }); - } + createSave.addEventListener('click' , function() { + const saveInput = document.getElementById('editInput').value; + + if (!saveInput.trim()) { + alert("수정 시 공백 x"); + return false; + } + createSpan.innerText = saveInput; + createLi.replaceChild(createSpan , editSpan); + + createSave.style.display = "none"; + createEdit.style.display = "inline"; + }); +} +function todoFilter() { + const checkboxList = document.getElementsByClassName('todoCheck'); + const todoList = document.querySelectorAll('#todo-list li'); + const checkValues = document.getElementById("todo-filter").value; + for(let i = 0; i < todoList.length; i++) { + const tdcheck = checkboxList[i]; + if (checkValues == "all") { + todoList[i].style.display = "list-item"; + } + else if (checkValues == "todo" && !tdcheck.checked) { + todoList[i].style.display = "list-item"; + } + else if (checkValues == "done" && tdcheck.checked) { + todoList[i].style.display = "list-item"; + } + else { + todoList[i].style.display = "none"; + } + + } +} \ No newline at end of file diff --git a/SimpleJs.js b/SimpleJs.js index 7d27454..eab372e 100644 --- a/SimpleJs.js +++ b/SimpleJs.js @@ -21,4 +21,5 @@ function btnClick() { alert("저장 하지 않으셨습니다."); } + } \ No newline at end of file diff --git a/detail.html b/detail.html index 160571b..566e814 100644 --- a/detail.html +++ b/detail.html @@ -4,15 +4,16 @@ Detail TODO List +

TODO LIST

- +
- @@ -23,5 +24,4 @@

TODO LIST

- diff --git a/simple.html b/simple.html index 2887e44..e6d10b6 100644 --- a/simple.html +++ b/simple.html @@ -10,7 +10,7 @@

TODO

- +
    @@ -19,6 +19,6 @@

    TODO

- + From fabaa07fa56729de3166ef2825692c2dd0d7032a Mon Sep 17 00:00:00 2001 From: hongjungwook1 Date: Fri, 13 Dec 2024 20:27:45 +0900 Subject: [PATCH 3/5] hongjungwook1 --- DetailJs.js | 177 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 101 insertions(+), 76 deletions(-) diff --git a/DetailJs.js b/DetailJs.js index 56ea1c0..e5133cd 100644 --- a/DetailJs.js +++ b/DetailJs.js @@ -1,96 +1,78 @@ -function show_text(event) { - //Li 생성 - const createLi = document.createElement('li'); +function insertTodo(event) { + if(event.key === 'Enter') { + createdValue(); + } +} - //set text value - const setInput = document.getElementsByClassName('todo-input')[0].value; +function createdButton (inner , className) { + const createbutton = document.createElement("button"); + createbutton.innerHTML = inner; + createbutton.className = className; - // Check Box 생성 - const checkBox = document.createElement("input"); - checkBox.type ="checkbox"; - checkBox.classList.add('todoCheck'); - - // Edit 버튼 생성 - const createEdit = document.createElement("button"); - createEdit.innerHTML = 'Edit'; - createEdit.classList.add("editBtn"); - - // Save 버튼 생성 - const createSave = document.createElement("button"); - createSave.innerHTML = 'Save'; - createSave.classList.add("saveBtn"); - createSave.style.display = "none"; - - // X 버튼 생성 - const createXbtn = document.createElement("button"); - createXbtn.innerHTML = 'X'; - createXbtn.type = "button"; - - // 기본 Span 생성 - const createSpan = document.createElement("span"); - createSpan.append(setInput); - - // 수정 시 사용되는 Input text 생성 - const editInput = document.createElement('input'); - editInput.type = 'text'; - editInput.id = 'editInput'; - - // 수정 시 사용되는 Span 생성 - const editSpan = document.createElement("span"); - editSpan.append(editInput); + return createbutton; +} - if (!setInput.trim()) { - alert("공백 추가 x"); - return false; - } +function createdInput (inner , type , className) { + const createdInput = document.createElement("input"); + createdInput.inner = inner; + createdInput.type = type; + createdInput.className = className; - if(event.key === 'Enter') { - createLi.append(checkBox) - createLi.append(createSpan) - document - .getElementById('todo-list') - .appendChild(createLi) - .append(createEdit , createSave , createXbtn) - } + return createdInput; +} - createXbtn.addEventListener('click', function() { - createLi.remove(); - }); +function createdElement (element , inner , className) { + const createdElement = document.createElement(element); + createdElement.inner = inner; + createdElement.className = className; - createEdit.addEventListener('click' , function() { - createEdit.style.display = "none"; - createSave.style.display = "inline"; - - createLi.replaceChild(editSpan , createSpan); + return createdElement; +} - }); - - createSave.addEventListener('click' , function() { - const saveInput = document.getElementById('editInput').value; - - if (!saveInput.trim()) { - alert("수정 시 공백 x"); - return false; - } +function findTopNode (event) { + const topNode = event.target.parentElement; + return topNode; +} - createSpan.innerText = saveInput; - createLi.replaceChild(createSpan , editSpan); - - createSave.style.display = "none"; - createEdit.style.display = "inline"; - }); +function createdValue() { + const inputValue = document.querySelector('.todo-input').value.trim(); + if (inputValue == '') return; + + const newLi = createdElement("li" , "newLi" , "newLi"); + + const createdCheckBox = createdInput("checkBox" , "checkBox" , "todoCheckBoxList"); + newLi.append(createdCheckBox) + + const newSpan = createdElement("span" , "newSpan" , "newSpan"); + newSpan.append(inputValue); + newLi.append(newSpan) + + const createdEdit = createdButton("Edit" , "editBtn"); + createdEdit.addEventListener('click' , (event) => {clickEditBtn(event)}); + + const createdXBtn = createdButton("X" , "xBtn"); + createdXBtn.addEventListener('click', (event) => {clickXBtn(event);}); + + const createdSave = createdButton("Save" , "saveBtn"); + createdSave.style.display = "none"; + createdSave.addEventListener('click', (event) => {clickSaveBtn(event);}); + newLi.append(createdEdit , createdSave , createdXBtn); + const todoList = document.getElementById('todo-list') + todoList.append(newLi); + + return todoList; } function todoFilter() { - const checkboxList = document.getElementsByClassName('todoCheck'); + const checkboxList = document.getElementsByClassName('todoCheckBoxList'); const todoList = document.querySelectorAll('#todo-list li'); const checkValues = document.getElementById("todo-filter").value; for(let i = 0; i < todoList.length; i++) { const tdcheck = checkboxList[i]; - + if (checkValues == "all") { todoList[i].style.display = "list-item"; } @@ -103,7 +85,50 @@ function todoFilter() { else { todoList[i].style.display = "none"; } - } +} + +function clickXBtn(event) { + const topNode = findTopNode(event); + topNode.remove(); +}; + +function clickEditBtn(event) { + const topNode = findTopNode(event); + + const editInput = createdInput("editInput" , "text" , "editInput"); + const editSpan = createdElement("span" , "editSpan" , "editSpan"); + editSpan.append(editInput); + + const findSaveBtn = topNode.querySelector(".saveBtn"); + findSaveBtn.style.display = "inline"; + + const findEditBtn = topNode.querySelector(".editBtn"); + findEditBtn.style.display = "none"; + + const findXBtn = topNode.querySelector(".xBtn"); + findXBtn.style.display = "none"; + + const changeSpan = topNode.querySelector("span"); + topNode.replaceChild(editSpan , changeSpan); + +} + +function clickSaveBtn (event) { + const topNode = findTopNode(event); + + const saveEdit = topNode.querySelector(".editSpan"); + const saveInput = saveEdit.querySelector(".editInput"); + + saveEdit.innerText = saveInput.value; + + const findSaveBtn = topNode.querySelector(".saveBtn"); + findSaveBtn.style.display = "none"; + + const findEditBtn = topNode.querySelector(".editBtn"); + findEditBtn.style.display = "inline"; + + const findXBtn = topNode.querySelector(".xBtn"); + findXBtn.style.display = "inline"; } \ No newline at end of file From 6ab566c0ad0d198ad40cb979ce536cec7c42dd48 Mon Sep 17 00:00:00 2001 From: hongjungwook1 Date: Fri, 13 Dec 2024 20:29:37 +0900 Subject: [PATCH 4/5] hongjungwook --- DetailJs.js | 1 + 1 file changed, 1 insertion(+) diff --git a/DetailJs.js b/DetailJs.js index e5133cd..0924183 100644 --- a/DetailJs.js +++ b/DetailJs.js @@ -19,6 +19,7 @@ function createdInput (inner , type , className) { createdInput.className = className; return createdInput; + } function createdElement (element , inner , className) { From 75b0b776ebf4e3b440f7cdd67bfea8f4700fe776 Mon Sep 17 00:00:00 2001 From: hongjungwook1 Date: Fri, 20 Dec 2024 15:34:14 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Local=20Stroage=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DetailJs.js | 119 +++++++++++++++++++++++++++++++++++++++++++--------- detail.html | 4 +- 2 files changed, 101 insertions(+), 22 deletions(-) diff --git a/DetailJs.js b/DetailJs.js index 0924183..e6adde6 100644 --- a/DetailJs.js +++ b/DetailJs.js @@ -1,5 +1,15 @@ +window.addEventListener("load" , function() { + const getLocalStorageData = getLocalStorage(); + if (getLocalStorageData) { + for (let i = 0; i < getLocalStorageData.length; i++) { + showLocalStorage(getLocalStorageData[i]); + } + } +}); + function insertTodo(event) { if(event.key === 'Enter') { + setLocalStorage(); createdValue(); } } @@ -36,51 +46,59 @@ function findTopNode (event) { } function createdValue() { - const inputValue = document.querySelector('.todo-input').value.trim(); - if (inputValue == '') return; + const input = document.querySelector('.todo-input'); + const inputValue = input.value.trim(); - const newLi = createdElement("li" , "newLi" , "newLi"); + if (inputValue === '') return; + const newLi = createdElement("li" , "newLi" , "newLi"); + const createdCheckBox = createdInput("checkBox" , "checkBox" , "todoCheckBoxList"); newLi.append(createdCheckBox) - + const newSpan = createdElement("span" , "newSpan" , "newSpan"); newSpan.append(inputValue); newLi.append(newSpan) - + const createdEdit = createdButton("Edit" , "editBtn"); createdEdit.addEventListener('click' , (event) => {clickEditBtn(event)}); - + const createdXBtn = createdButton("X" , "xBtn"); createdXBtn.addEventListener('click', (event) => {clickXBtn(event);}); - + const createdSave = createdButton("Save" , "saveBtn"); createdSave.style.display = "none"; createdSave.addEventListener('click', (event) => {clickSaveBtn(event);}); - + newLi.append(createdEdit , createdSave , createdXBtn); - + const todoList = document.getElementById('todo-list') todoList.append(newLi); - + + input.value = ''; + return todoList; } -function todoFilter() { - const checkboxList = document.getElementsByClassName('todoCheckBoxList'); - const todoList = document.querySelectorAll('#todo-list li'); +function changeFilter () { const checkValues = document.getElementById("todo-filter").value; + todoFilter(checkValues); +} + +function todoFilter(checkValues) { + const todoList = document.querySelectorAll('#todo-list li'); + const checkboxList = document.getElementsByClassName('todoCheckBoxList'); for(let i = 0; i < todoList.length; i++) { const tdcheck = checkboxList[i]; - if (checkValues == "all") { + if (checkValues === "all") { todoList[i].style.display = "list-item"; } - else if (checkValues == "todo" && !tdcheck.checked) { + else if (checkValues === "todo" && !tdcheck.checked) { todoList[i].style.display = "list-item"; } - else if (checkValues == "done" && tdcheck.checked) { + else if (checkValues === "done" && tdcheck.checked) { todoList[i].style.display = "list-item"; } else { @@ -91,8 +109,15 @@ function todoFilter() { function clickXBtn(event) { const topNode = findTopNode(event); + const getNumber = parseInt(topNode.querySelector("span").id, 10); + const getLocalStorageData = getLocalStorage(); + + const updateLocalStorageData = getLocalStorageData.filter(item => item.Number !== getNumber); + saveLocalStorage(updateLocalStorageData); + topNode.remove(); -}; + +} function clickEditBtn(event) { const topNode = findTopNode(event); @@ -117,12 +142,10 @@ function clickEditBtn(event) { function clickSaveBtn (event) { const topNode = findTopNode(event); - const saveEdit = topNode.querySelector(".editSpan"); const saveInput = saveEdit.querySelector(".editInput"); - saveEdit.innerText = saveInput.value; - + const findSaveBtn = topNode.querySelector(".saveBtn"); findSaveBtn.style.display = "none"; @@ -132,4 +155,60 @@ function clickSaveBtn (event) { const findXBtn = topNode.querySelector(".xBtn"); findXBtn.style.display = "inline"; + setLocalStorage(); + +} + +function setLocalStorage () { + const saveDataArray = [] + const todoList = document.querySelector('.todo-list'); + + for (let i = 0; i < todoList.children.length; i++) { + const getSpan = todoList.children[i].querySelector('span'); + + const saveDataObj = { + Text : getSpan.innerHTML, + Number : parseInt(i , 10) + }; + getSpan.id = i; + saveDataArray.push(saveDataObj); + } + saveLocalStorage(saveDataArray); +} + +function saveLocalStorage(data) { + localStorage.setItem("Save" , JSON.stringify(data)); +} + +function showLocalStorage (getLocalStorageData) { + const newLi = createdElement("li" , "newLi" , "newLi"); + + const createdCheckBox = createdInput("checkBox" , "checkBox" , "todoCheckBoxList"); + newLi.append(createdCheckBox) + + const newSpan = createdElement("span" , "newSpan" , "newSpan"); + newSpan.append(getLocalStorageData.Text); + newSpan.id = parseInt(getLocalStorageData.Number); + newLi.append(newSpan); + + const createdEdit = createdButton("Edit" , "editBtn"); + createdEdit.addEventListener('click' , (event) => {clickEditBtn(event)}); + + const createdXBtn = createdButton("X" , "xBtn"); + createdXBtn.addEventListener('click', (event) => {clickXBtn(event);}); + + const createdSave = createdButton("Save" , "saveBtn"); + createdSave.style.display = "none"; + createdSave.addEventListener('click', (event) => {clickSaveBtn(event);}); + + newLi.append(createdEdit , createdSave , createdXBtn); + + const todoList = document.getElementById('todo-list') + todoList.append(newLi); + +} + +function getLocalStorage () { + const getLocalStorageData = JSON.parse(localStorage.getItem('Save')); + return getLocalStorageData; } \ No newline at end of file diff --git a/detail.html b/detail.html index 566e814..47b89cd 100644 --- a/detail.html +++ b/detail.html @@ -4,13 +4,12 @@ Detail TODO List -

TODO LIST

- +