From f9d344d5772d327903f4f9a37561c105ef968426 Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Tue, 12 Sep 2023 22:10:40 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=EA=B8=B0=EB=B3=B8=EC=A0=81=20html=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 19 ++++++++++++++++++- style.css | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 420961c..40bada1 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,24 @@ -
+
+

Todo List

+
+ + +
+ +
+

List To Do

+
๊ณผ์ œ
+
+ +
+

List Done

+
์ˆ˜๊ฐ•์‹ ์ฒญ
+
+ +
\ No newline at end of file diff --git a/style.css b/style.css index e69de29..992f758 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,37 @@ +body{ + width: 100vw; + height: 100vh; + background-color: gray; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + + +.container{ + background-color: white; + width: 300px; + height: 600px; + +} +.todo_input{ + width:100%; + background-color: whitesmoke; + height: 60px; + display: flex; + align-items: center; + +} +#inputTodo{ + width:80%; + height: 40px; + margin:10px; + font-size: 15px; + border: 0; + border-radius: 15px; + outline: none; + padding-left: 10px; + background-color: rgb(233, 233, 233); + +} \ No newline at end of file From eed56d2f09731fc4cffe6f3e07a324987f15e40a Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 15:49:00 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20todo=20list=20add,=20delete=20?= =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=ED=8B=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 13 ++++++++---- script.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 51 +++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 119 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 40bada1..fab6432 100644 --- a/index.html +++ b/index.html @@ -9,20 +9,25 @@
+
+
+
+
+

Todo List

-
+
- +

List To Do

-
๊ณผ์ œ
+

List Done

-
์ˆ˜๊ฐ•์‹ ์ฒญ
+
diff --git a/script.js b/script.js index e69de29..0556436 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,62 @@ +const inputTodo = document.querySelector("#inputTodo"); +const todoItems = document.querySelector("#todoList"); +const doneList = document.querySelector("#doneList"); +const doneArray = document.querySelectorAll("#doneList .todoItem"); +const addBtn = document.querySelector(".addBtn"); +const todoTextArray = []; +const doneTextArray = []; + +function createBtn(className, text) { + var button = document.createElement("div"); + + button.textContent = text; + button.setAttribute("class", "listBtns"); + button.classList.add(className); + return button; +} + +function deleteItem() { + var removeBtns = document.querySelectorAll(".deleteBtn"); + for (i = 0; i < removeBtns.length; i++) { + removeBtns[i].addEventListener("click", function () { + if (this.parentNode) + this.parentNode.parentNode.removeChild(this.parentNode); + }); + } +} + +function todoToDone() { + var doneBtns = document.querySelectorAll(".doneBtn"); + + for (var i = 0; i < doneBtns.length; i++) { + doneBtns[i].addEventListener("click", function () { + if (this.parentNode.parentNode) + doneList.insertBefore(this.parentNode, doneList.childNodes[0]); + }); + } +} + +function newTodo() { + var newDiv = document.createElement("div"); + var newText = document.createTextNode(inputTodo.value); // input ํƒœ๊ทธ์— ์“ด text ๊ฐ’ + newDiv.appendChild(newText); + var doneBtn = createBtn("doneBtn", "โœ…"); + var deleteBtn = createBtn("deleteBtn", "โŒ"); + newDiv.appendChild(doneBtn); + newDiv.appendChild(deleteBtn); + newDiv.setAttribute("class", "todoItem"); + + todoItems.insertBefore(newDiv, todoItems.childNodes[0]); + inputTodo.value = ""; + //deleteBtn ๋ˆ„๋ฅด๋ฉด ์‚ญ์ œ ๊ตฌํ˜„ + deleteItem(); + + //doneBtn ๋ˆ„๋ฅด๋ฉด todo -> done์œผ๋กœ + todoToDone(); +} + +function init() { + addBtn.addEventListener("click", newTodo); +} + +init(); diff --git a/style.css b/style.css index 992f758..b83d4bc 100644 --- a/style.css +++ b/style.css @@ -7,14 +7,46 @@ body{ align-items: center; justify-content: center; } - - .container{ background-color: white; width: 300px; - height: 600px; + height: 650px; + border-radius: 10px; +} +.todoContainer, +.doneContainer { + flex: 1; + padding: 10px; + background-color: #f0f0f0; + margin: 10px; + height: 200px; +} +.header{ + height: 15px; + width:100%; + display:flex; +} +.round{ + width: 10px; + height: 10px; + border-radius: 50%; + margin:5px; +} +.round:hover{ + cursor: pointer; +} +.Red { + background-color: #F5655B; +} +.round.Yellow { + background-color: #F6BD3B; +} + +.Green { + background-color: #43C645; } + .todo_input{ width:100%; background-color: whitesmoke; @@ -34,4 +66,17 @@ body{ padding-left: 10px; background-color: rgb(233, 233, 233); +} +.deleteBtn{ + position:fixed; + right:280px; +} +.doneBtn{ + position:fixed; + right:310px; +} +.todoItem{ + display:flex; + justify-content: space-between; + width: 100%; } \ No newline at end of file From 7786bda4ed8d16c7a417d8f35d54dde84c2f38b8 Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 21:03:50 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=B6=94=EA=B0=80,=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=EC=B2=B4=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 ++++---- script.js | 32 ++++++++++++++++++++++++-------- style.css | 7 +++---- 3 files changed, 31 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index fab6432..ff895e2 100644 --- a/index.html +++ b/index.html @@ -14,19 +14,19 @@
-

Todo List

+

โœ๏ธ Todo List

- +
โž•
-

List To Do

+

List To Do : 0

-

List Done

+

List Done : 0

diff --git a/script.js b/script.js index 0556436..984f4c9 100644 --- a/script.js +++ b/script.js @@ -1,37 +1,52 @@ const inputTodo = document.querySelector("#inputTodo"); const todoItems = document.querySelector("#todoList"); const doneList = document.querySelector("#doneList"); -const doneArray = document.querySelectorAll("#doneList .todoItem"); const addBtn = document.querySelector(".addBtn"); -const todoTextArray = []; -const doneTextArray = []; +//๋ฒ„ํŠผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜ function createBtn(className, text) { var button = document.createElement("div"); - button.textContent = text; - button.setAttribute("class", "listBtns"); button.classList.add(className); return button; } +//array ์‚ญ์ œ ํ›„ ์ €์žฅํ•˜๋Š” ํ•จ์ˆ˜ +function deleteData(arr, value) { + const index = arr.indexOf(value); + if (index !== -1) { + arr.splice(index, 1); + } +} + +//deleteBtn์„ ๋ˆŒ๋ €์„๋•Œ function deleteItem() { var removeBtns = document.querySelectorAll(".deleteBtn"); for (i = 0; i < removeBtns.length; i++) { removeBtns[i].addEventListener("click", function () { - if (this.parentNode) + if (this.parentNode) { this.parentNode.parentNode.removeChild(this.parentNode); + var del = this.parentNode.firstChild.textContent; + + if (todoArr.includes(del)) + deleteData(todoArr, this.parentNode.firstChild.textContent); + else deleteData(doneArr, this.parentNode.firstChild.textContent); + } }); } } +//doneBtn์„ ๋ˆŒ๋ €์„๋•Œ function todoToDone() { var doneBtns = document.querySelectorAll(".doneBtn"); for (var i = 0; i < doneBtns.length; i++) { doneBtns[i].addEventListener("click", function () { - if (this.parentNode.parentNode) + if (this.parentNode.parentNode === todoItems) { doneList.insertBefore(this.parentNode, doneList.childNodes[0]); + deleteData(todoArr, this.parentNode.firstChild.textContent); + doneArr.push(this.parentNode.firstChild.textContent); + } }); } } @@ -45,9 +60,10 @@ function newTodo() { newDiv.appendChild(doneBtn); newDiv.appendChild(deleteBtn); newDiv.setAttribute("class", "todoItem"); - todoItems.insertBefore(newDiv, todoItems.childNodes[0]); + todoArr.push(inputTodo.value); // todoArr ์— ๊ฐ’ ์ €์žฅํ•ด์คŒ inputTodo.value = ""; + //deleteBtn ๋ˆ„๋ฅด๋ฉด ์‚ญ์ œ ๊ตฌํ˜„ deleteItem(); diff --git a/style.css b/style.css index b83d4bc..0e2cffc 100644 --- a/style.css +++ b/style.css @@ -20,6 +20,7 @@ body{ background-color: #f0f0f0; margin: 10px; height: 200px; + border-radius: 10px; } .header{ height: 15px; @@ -38,8 +39,7 @@ body{ .Red { background-color: #F5655B; } - -.round.Yellow { +.Yellow { background-color: #F6BD3B; } @@ -47,9 +47,8 @@ body{ background-color: #43C645; } -.todo_input{ +.todoInput { width:100%; - background-color: whitesmoke; height: 60px; display: flex; align-items: center; From 877d2e2926ca1247abfe2069f721032d439838d0 Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 21:07:17 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EA=B0=9C=EC=88=98=20=EC=84=B8=EB=8A=94=20=ED=95=A8=EC=88=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/script.js b/script.js index 984f4c9..872e371 100644 --- a/script.js +++ b/script.js @@ -2,6 +2,15 @@ const inputTodo = document.querySelector("#inputTodo"); const todoItems = document.querySelector("#todoList"); const doneList = document.querySelector("#doneList"); const addBtn = document.querySelector(".addBtn"); +const lenTodo = document.getElementById("todoCount"); +const lenDone = document.getElementById("doneCount"); +let todoArr = []; +let doneArr = []; +//Item ๊ฐœ์ˆ˜ ์ €์žฅํ•˜๋Š” ํ•จ์ˆ˜ +function setLength() { + lenTodo.innerText = todoArr.length; + lenDone.innerText = doneArr.length; +} //๋ฒ„ํŠผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜ function createBtn(className, text) { @@ -31,6 +40,7 @@ function deleteItem() { if (todoArr.includes(del)) deleteData(todoArr, this.parentNode.firstChild.textContent); else deleteData(doneArr, this.parentNode.firstChild.textContent); + setLength(); } }); } @@ -46,6 +56,7 @@ function todoToDone() { doneList.insertBefore(this.parentNode, doneList.childNodes[0]); deleteData(todoArr, this.parentNode.firstChild.textContent); doneArr.push(this.parentNode.firstChild.textContent); + setLength(); } }); } @@ -69,6 +80,7 @@ function newTodo() { //doneBtn ๋ˆ„๋ฅด๋ฉด todo -> done์œผ๋กœ todoToDone(); + setLength(); } function init() { From 89faf898502180fc8e5751cd75f3af2a0e0839d1 Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 21:08:54 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20local=20storage=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/script.js b/script.js index 872e371..9995176 100644 --- a/script.js +++ b/script.js @@ -6,6 +6,15 @@ const lenTodo = document.getElementById("todoCount"); const lenDone = document.getElementById("doneCount"); let todoArr = []; let doneArr = []; +const TODODATA = "todoData"; +const DONEDATA = "doneData"; + +//LocalStorage์— ์ €์žฅํ•˜๋Š” ํ•จ์ˆ˜ +function saveDATA() { + localStorage.setItem(TODODATA, JSON.stringify(todoArr)); + localStorage.setItem(DONEDATA, JSON.stringify(doneArr)); +} + //Item ๊ฐœ์ˆ˜ ์ €์žฅํ•˜๋Š” ํ•จ์ˆ˜ function setLength() { lenTodo.innerText = todoArr.length; @@ -41,6 +50,7 @@ function deleteItem() { deleteData(todoArr, this.parentNode.firstChild.textContent); else deleteData(doneArr, this.parentNode.firstChild.textContent); setLength(); + saveDATA(); } }); } @@ -57,6 +67,7 @@ function todoToDone() { deleteData(todoArr, this.parentNode.firstChild.textContent); doneArr.push(this.parentNode.firstChild.textContent); setLength(); + saveDATA(); } }); } @@ -81,6 +92,7 @@ function newTodo() { //doneBtn ๋ˆ„๋ฅด๋ฉด todo -> done์œผ๋กœ todoToDone(); setLength(); + saveDATA(); } function init() { From 7e125198113b5148d773d8409acb3cfc7cf48eaf Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 21:28:08 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EC=98=A4=EB=8A=98=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 5 +++-- script.js | 22 ++++++++++++++++++++++ style.css | 5 ++++- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index ff895e2..e12fe87 100644 --- a/index.html +++ b/index.html @@ -15,18 +15,19 @@

โœ๏ธ Todo List

+

2022๋…„ 9์›” 15์ผ

โž•
-

List To Do : 0

+

๐Ÿ˜ข List To Do : 0

-

List Done : 0

+

๐Ÿ˜† List Done : 0

diff --git a/script.js b/script.js index 9995176..daa6b26 100644 --- a/script.js +++ b/script.js @@ -9,6 +9,27 @@ let doneArr = []; const TODODATA = "todoData"; const DONEDATA = "doneData"; +function todayDate() { + var todayDate = document.getElementById("date"); + const dayWeek = [ + "์ผ์š”์ผ", + "์›”์š”์ผ", + "ํ™”์š”์ผ", + "์ˆ˜์š”์ผ", + "๋ชฉ์š”์ผ", + "๊ธˆ์š”์ผ", + "ํ† ์š”์ผ", + ]; + let today = new Date(); + + let year = today.getFullYear(); + let month = today.getMonth() + 1; + let date = today.getDate(); + let day = dayWeek[today.getDay()]; + + todayDate.textContent = year + "๋…„ " + month + "์›” " + date + "์ผ " + day; +} + //LocalStorage์— ์ €์žฅํ•˜๋Š” ํ•จ์ˆ˜ function saveDATA() { localStorage.setItem(TODODATA, JSON.stringify(todoArr)); @@ -97,6 +118,7 @@ function newTodo() { function init() { addBtn.addEventListener("click", newTodo); + todayDate(); } init(); diff --git a/style.css b/style.css index 0e2cffc..f461583 100644 --- a/style.css +++ b/style.css @@ -7,10 +7,13 @@ body{ align-items: center; justify-content: center; } +h3{ + text-align: center; +} .container{ background-color: white; width: 300px; - height: 650px; + height: 700px; border-radius: 10px; } .todoContainer, From 5889c5104f0a8b2e5c6ede6db7f74a772d17add1 Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 21:35:51 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20input=20null=20=EC=98=88=EC=99=B8?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/script.js b/script.js index daa6b26..5f002f6 100644 --- a/script.js +++ b/script.js @@ -95,6 +95,12 @@ function todoToDone() { } function newTodo() { + //input null ์˜ˆ์™ธ์ฒ˜๋ฆฌ + if (inputTodo.value === "") { + alert("Please Enter Todo."); + return; + } + var newDiv = document.createElement("div"); var newText = document.createTextNode(inputTodo.value); // input ํƒœ๊ทธ์— ์“ด text ๊ฐ’ newDiv.appendChild(newText); From 935296864ad268b6c5f6ef690f3f553d80270496 Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 22:02:55 +0900 Subject: [PATCH 08/10] =?UTF-8?q?fix:=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/style.css b/style.css index f461583..c57bc35 100644 --- a/style.css +++ b/style.css @@ -69,16 +69,13 @@ h3{ background-color: rgb(233, 233, 233); } -.deleteBtn{ - position:fixed; - right:280px; -} -.doneBtn{ - position:fixed; - right:310px; -} + .todoItem{ display:flex; - justify-content: space-between; - width: 100%; + +} +.doneBtn{ + margin-left:180px; + margin-right:10px; + } \ No newline at end of file From 43a6a30648ad44b6df8f93bc2dc5fd8872ec024d Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 22:15:26 +0900 Subject: [PATCH 09/10] =?UTF-8?q?fix:=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index c57bc35..764b139 100644 --- a/style.css +++ b/style.css @@ -36,9 +36,7 @@ h3{ border-radius: 50%; margin:5px; } -.round:hover{ - cursor: pointer; -} + .Red { background-color: #F5655B; } @@ -71,11 +69,24 @@ h3{ } .todoItem{ + width:300px; display:flex; + position: relative; + width: 100%; } +.doneBtn, +.deleteBtn{ + position: absolute; + right: 0; +} .doneBtn{ - margin-left:180px; - margin-right:10px; - + margin-right:30px; +} +.round:hover, +.addBtn:hover, +.doneBtn:hover, +.deleteBtn:hover { + color:#222; + cursor: pointer; } \ No newline at end of file From d36548ef4515292f72aad211644e0e01c3bebb40 Mon Sep 17 00:00:00 2001 From: dhsin98 Date: Fri, 15 Sep 2023 22:17:10 +0900 Subject: [PATCH 10/10] =?UTF-8?q?fix:=20css=20=EC=88=98=EC=A0=952?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index 764b139..f4ba707 100644 --- a/style.css +++ b/style.css @@ -73,6 +73,7 @@ h3{ display:flex; position: relative; width: 100%; + padding:2px; } .doneBtn,