From 6842819e8abe5a46ddfc83a6379d4aef5441c830 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:26:33 +0900 Subject: [PATCH 01/19] =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 55 ++++++++++++++++++++++++++++++++++++++++++------------ script.js | 2 ++ style.css | 37 ++++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index d241b1b..14c7250 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,45 @@ - - - - Vanilla Todo - - - - -
- - - + + + + + To-do list + + + + + + + +
+ + +
+
❗투두리스트❗
+
+ + +
+
+ +
+
+
✍️To Do(0)
+ +
+
+ +
+
+
👻Done(0)
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js index e69de29..dc00cc9 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..05b1ff1 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,37 @@ +@font-face { + font-family: 'SuncheonB'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +body{ + + font-family: 'SuncheonB'; + font-size: 15px; + display: flex; + width: 100vh; + height: 100vh; + justify-content: center; + align-items: center; + margin: 0; + + +} + +.whiteBox{ + + + text-align: center; + width: 360px; + height: 600px; + background-color: white; + display: flex; + flex-direction: column; + border-bottom: 1px solid grey; + border-radius: 9px; + + + +} + From df81986a60849463150b8df1031e39fe8b8ac25b Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:30:39 +0900 Subject: [PATCH 02/19] =?UTF-8?q?=EC=84=B8=EB=B6=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/style.css b/style.css index 05b1ff1..8308298 100644 --- a/style.css +++ b/style.css @@ -35,3 +35,34 @@ body{ } +.title-font{ + font-size: 20px; +} + +#toDo{ + width: 300px; + height: 50px; + border-radius: 9px; + font-family: 'SuncheonB'; +} +.inputBox{ + + flex: 0.3; + border-bottom: 1px solid grey; + +} + +.toDoList{ + margin: 10px; +} +.toDoBox{ + margin-top: 20px; + flex: 0.5; + border-bottom: 1px solid grey; +} + +.doneBox{ + margin: 20px; + flex: 0.5; + +} \ No newline at end of file From e4932532101a8c1f950a976548c9e177c14087d9 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:32:39 +0900 Subject: [PATCH 03/19] =?UTF-8?q?=EB=B0=B0=EA=B2=BD=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=9E=9C=EB=8D=A4=EC=9C=BC=EB=A1=9C=20=EB=B0=94=EB=80=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 17 ++++++++++++++++- style.css | 3 ++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index dc00cc9..585dfc4 100644 --- a/script.js +++ b/script.js @@ -1,2 +1,17 @@ - +const colors = [ + "#0fbcf9", + "#00d8d6", + "#05c46b", + "#ffc048", + "#ffdd59" + + ]; + + + + + let firstColor = colors[Math.floor(Math.random() * colors.length)]; + let secondColor = colors[Math.floor(Math.random() * colors.length)]; + + document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`; \ No newline at end of file diff --git a/style.css b/style.css index 8308298..d743caa 100644 --- a/style.css +++ b/style.css @@ -65,4 +65,5 @@ body{ margin: 20px; flex: 0.5; -} \ No newline at end of file +} + From 79da2a0db5eab123049d1dcd22aa80f5a7ac4646 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:35:55 +0900 Subject: [PATCH 04/19] =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=ED=9B=84=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 585dfc4..a6f76b3 100644 --- a/script.js +++ b/script.js @@ -14,4 +14,38 @@ const colors = [ let secondColor = colors[Math.floor(Math.random() * colors.length)]; document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`; - \ No newline at end of file + + const toDoButton = document.getElementById("toDoButton"); + const toDo = document.getElementById("toDo"); + + function toDoInput(){ + const newTodo = toDo.value; + toDo.value = ""; + makeToDo(newTodo); + + } + + function makeToDo(newTodo) { + toDoNum++; + toDoInfo.innerText = `(${toDoNum})`; + + const li = document.createElement("div"); + const toDoItem = document.createElement("span"); + const deleteButton = document.createElement("span"); + + li.style.margin= "10px"; + + toDoItem.innerText = newTodo; + deleteButton.innerText = "❌"; + + li.appendChild(toDoItem); + li.appendChild(deleteButton); + toDoList.appendChild(li); + + toDoItem.addEventListener("click", moveToDo); + deleteButton.addEventListener("click", deleteToDo); + + } + + toDoButton.addEventListener("click", toDoInput); + \ No newline at end of file From 91ca0ff3ba1688b3ffa7b1c82430e3430fcce3f7 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:39:05 +0900 Subject: [PATCH 05/19] =?UTF-8?q?x=EB=A5=BC=20=EB=88=84=EB=A5=B4=EB=A9=B4?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= 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 a6f76b3..b7b4f85 100644 --- a/script.js +++ b/script.js @@ -17,6 +17,18 @@ const colors = [ const toDoButton = document.getElementById("toDoButton"); const toDo = document.getElementById("toDo"); + const toDoList = document.getElementById("todo-list"); + + function deleteToDo(event) { + toDoNum--; + toDoInfo.innerText =`(${toDoNum})`; + + const deletetoDoList = event.target.parentElement; + deletetoDoList.remove(); + + + } + function toDoInput(){ const newTodo = toDo.value; From 57d667fbe3ee90856c4ec9e98e0e13492c52fc20 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:42:31 +0900 Subject: [PATCH 06/19] =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/script.js b/script.js index b7b4f85..c70e175 100644 --- a/script.js +++ b/script.js @@ -18,6 +18,10 @@ const colors = [ const toDoButton = document.getElementById("toDoButton"); const toDo = document.getElementById("toDo"); const toDoList = document.getElementById("todo-list"); + const toDoInfo = document.getElementById("toDoInfo"); + const doneList = document.getElementById("done-list"); + const doneInfo = document.getElementById("doneInfo"); + function deleteToDo(event) { toDoNum--; @@ -29,6 +33,27 @@ const colors = [ } + function moveToDo(event) { + deleteToDo(event); + + const removeList = document.createElement("div"); + const removeItem = event.target; + const deleteButton = document.createElement("span"); + deleteButton.innerText = "❌"; + + removeList.style.color ="grey"; + + removeList.appendChild(removeItem); + removeList.appendChild(deleteButton); + doneList.appendChild(removeList); + + + doneNum++; + doneInfo.innerText =`(${doneNum})`; + + + } + function toDoInput(){ const newTodo = toDo.value; From 2fc16492e8c78f766c00a8a3dc6286cab63a408d Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:44:31 +0900 Subject: [PATCH 07/19] =?UTF-8?q?done=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index c70e175..0ed3956 100644 --- a/script.js +++ b/script.js @@ -51,11 +51,20 @@ const colors = [ doneNum++; doneInfo.innerText =`(${doneNum})`; + deleteButton.addEventListener("click", trashDoneToDo); } + function trashDoneToDo(event) { + const li = event.target.parentElement; + li.remove(); + + doneNum--; + doneInfo.innerText =`(${doneNum})`; + + } - function toDoInput(){ + function toDoInput(){ const newTodo = toDo.value; toDo.value = ""; makeToDo(newTodo); From 48f306b66a755c5b4f43d95c0d83f19b3ced2621 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:51:37 +0900 Subject: [PATCH 08/19] =?UTF-8?q?todo=20list=EA=B0=80=20=EB=8B=A4=20?= =?UTF-8?q?=EB=81=9D=EB=82=98=EB=A9=B4=20=EA=B3=BC=EC=A0=9C=20=EB=81=9D=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=ED=91=9C=EC=8B=9C!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/script.js b/script.js index 0ed3956..febcad7 100644 --- a/script.js +++ b/script.js @@ -21,7 +21,20 @@ const colors = [ const toDoInfo = document.getElementById("toDoInfo"); const doneList = document.getElementById("done-list"); const doneInfo = document.getElementById("doneInfo"); + const finishtoDo = document.getElementById("finishtoDo"); + function finish(){ + if(toDoNum === 0){ + finishtoDo.classList.remove("hidden"); + + } + + else{ + finishtoDo.classList.add("hidden"); + } + + + } function deleteToDo(event) { toDoNum--; From cc18576c3233e9180a953f520b5c3cfb9e33db29 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:54:05 +0900 Subject: [PATCH 09/19] =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EB=A5=BC=20?= =?UTF-8?q?=EC=93=B0=EA=B1=B0=EB=82=98=20=EC=A7=80=EC=9A=B8=EB=95=8C?= =?UTF-8?q?=EB=A7=88=EB=8B=A4=20finish=20=ED=95=A8=EC=88=98=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index febcad7..f8aa7df 100644 --- a/script.js +++ b/script.js @@ -43,7 +43,8 @@ const colors = [ const deletetoDoList = event.target.parentElement; deletetoDoList.remove(); - + finish(); + } function moveToDo(event) { @@ -103,6 +104,8 @@ const colors = [ toDoItem.addEventListener("click", moveToDo); deleteButton.addEventListener("click", deleteToDo); + + finish(); } From 9458a874e61f9d557738363a1315248157b47e85 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 13:56:31 +0900 Subject: [PATCH 10/19] =?UTF-8?q?=EB=B9=A0=EC=A7=84=20=EB=B6=80=EB=B6=84?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84..!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 3 +++ style.css | 8 ++++++++ 2 files changed, 11 insertions(+) diff --git a/script.js b/script.js index f8aa7df..94a9e32 100644 --- a/script.js +++ b/script.js @@ -23,6 +23,9 @@ const colors = [ const doneInfo = document.getElementById("doneInfo"); const finishtoDo = document.getElementById("finishtoDo"); + var toDoNum = 0; + var doneNum = 0; + function finish(){ if(toDoNum === 0){ finishtoDo.classList.remove("hidden"); diff --git a/style.css b/style.css index d743caa..8ba508a 100644 --- a/style.css +++ b/style.css @@ -67,3 +67,11 @@ body{ } +#finishtoDo{ + margin-top: 30px; + font-size: 30px; +} + +.hidden{ + display : none; +} From 0786f81ed2bdc71b78397e43694e836ea975b8a6 Mon Sep 17 00:00:00 2001 From: YoommY Date: Thu, 17 Mar 2022 14:38:28 +0900 Subject: [PATCH 11/19] f --- script.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 94a9e32..4715ab4 100644 --- a/script.js +++ b/script.js @@ -6,9 +6,7 @@ const colors = [ "#ffdd59" ]; - - - + let firstColor = colors[Math.floor(Math.random() * colors.length)]; let secondColor = colors[Math.floor(Math.random() * colors.length)]; @@ -25,7 +23,7 @@ const colors = [ var toDoNum = 0; var doneNum = 0; - + function finish(){ if(toDoNum === 0){ finishtoDo.classList.remove("hidden"); From 78de47b716db8a5b3210f74d43dea4cdde91009d Mon Sep 17 00:00:00 2001 From: SeieunYoo <101736358+SeieunYoo@users.noreply.github.com> Date: Sat, 19 Mar 2022 01:18:25 +0900 Subject: [PATCH 12/19] Update index.html Co-authored-by: Seon-Jong Kim <30287999+S-J-Kim@users.noreply.github.com> --- index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 14c7250..b0f6052 100644 --- a/index.html +++ b/index.html @@ -15,24 +15,24 @@
-
-
❗투두리스트❗
-
- - +
+
❗투두리스트❗
+
+ +
-
-
-
✍️To Do(0)
- +
+
+
✍️To Do(0)
+
-
+
-
👻Done(0)
+
👻Done(0)
From 865b6ad4c37b958a3ea98970145db511cbf90034 Mon Sep 17 00:00:00 2001 From: SeieunYoo <101736358+SeieunYoo@users.noreply.github.com> Date: Sat, 19 Mar 2022 01:30:33 +0900 Subject: [PATCH 13/19] Update script.js Co-authored-by: Seon-Jong Kim <30287999+S-J-Kim@users.noreply.github.com> --- script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 4715ab4..c8b02ef 100644 --- a/script.js +++ b/script.js @@ -21,8 +21,8 @@ const colors = [ const doneInfo = document.getElementById("doneInfo"); const finishtoDo = document.getElementById("finishtoDo"); - var toDoNum = 0; - var doneNum = 0; + let toDoNum = 0; + let doneNum = 0; function finish(){ if(toDoNum === 0){ From 5e6ee06331478c1a8afd86c63c41fcc76796cdbd Mon Sep 17 00:00:00 2001 From: SeieunYoo <101736358+SeieunYoo@users.noreply.github.com> Date: Sat, 19 Mar 2022 01:30:52 +0900 Subject: [PATCH 14/19] Update script.js Co-authored-by: Seon-Jong Kim <30287999+S-J-Kim@users.noreply.github.com> --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script.js b/script.js index c8b02ef..2e829de 100644 --- a/script.js +++ b/script.js @@ -38,7 +38,7 @@ const colors = [ } function deleteToDo(event) { - toDoNum--; + toDoNum = toDoNum =< 0 ? 0 : toDoNum-- toDoInfo.innerText =`(${toDoNum})`; const deletetoDoList = event.target.parentElement; From 1f4d90ac0ede5e2aeb81d109878c0a12f2243d09 Mon Sep 17 00:00:00 2001 From: YoommY Date: Sun, 20 Mar 2022 15:55:49 +0900 Subject: [PATCH 15/19] modified: kebab-case, let --- index.html | 47 ++++++++++++++++++++++------------------------- script.js | 10 +++++----- style.css | 19 +++++++++++++------ 3 files changed, 40 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 14c7250..129ee5b 100644 --- a/index.html +++ b/index.html @@ -14,32 +14,29 @@
- -
-
❗투두리스트❗
-
- - -
-
- -
-
-
✍️To Do(0)
- -
-
- -
-
-
👻Done(0)
- -
-
-
- - +
+
❗투두리스트❗
+
+ + +
+
+
+
+
✍️To Do(0)
+ +
+
+
+
+
👻Done(0)
+
+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js index 4715ab4..1d08212 100644 --- a/script.js +++ b/script.js @@ -13,13 +13,13 @@ const colors = [ document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`; - const toDoButton = document.getElementById("toDoButton"); - const toDo = document.getElementById("toDo"); + const toDoButton = document.getElementById("todo-button"); + const toDo = document.getElementById("todo"); const toDoList = document.getElementById("todo-list"); - const toDoInfo = document.getElementById("toDoInfo"); + const toDoInfo = document.getElementById("todo-info"); const doneList = document.getElementById("done-list"); - const doneInfo = document.getElementById("doneInfo"); - const finishtoDo = document.getElementById("finishtoDo"); + const doneInfo = document.getElementById("done-info"); + const finishtoDo = document.getElementById("finish-todo"); var toDoNum = 0; var doneNum = 0; diff --git a/style.css b/style.css index 8ba508a..4e6022e 100644 --- a/style.css +++ b/style.css @@ -39,35 +39,38 @@ body{ font-size: 20px; } -#toDo{ +#todo{ width: 300px; height: 50px; border-radius: 9px; font-family: 'SuncheonB'; } -.inputBox{ + +.input-box{ flex: 0.3; border-bottom: 1px solid grey; } -.toDoList{ +.todo-list{ margin: 10px; + } -.toDoBox{ + +.todo-box{ margin-top: 20px; flex: 0.5; border-bottom: 1px solid grey; } -.doneBox{ +.done-box{ margin: 20px; flex: 0.5; } -#finishtoDo{ +#finish-todo{ margin-top: 30px; font-size: 30px; } @@ -75,3 +78,7 @@ body{ .hidden{ display : none; } + +#todo-button{ + cursor: pointer; +} \ No newline at end of file From a0da70711afd7a4450e8884239ff6ffcb0d18343 Mon Sep 17 00:00:00 2001 From: YoommY Date: Sun, 20 Mar 2022 16:13:57 +0900 Subject: [PATCH 16/19] modified: error todonum,donenum negative --- index.html | 2 +- script.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 129ee5b..b0a4f6c 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
✍️To Do(0)
- +
diff --git a/script.js b/script.js index 1d08212..97a3661 100644 --- a/script.js +++ b/script.js @@ -21,8 +21,8 @@ const colors = [ const doneInfo = document.getElementById("done-info"); const finishtoDo = document.getElementById("finish-todo"); - var toDoNum = 0; - var doneNum = 0; + let toDoNum = 0; + let doneNum = 0; function finish(){ if(toDoNum === 0){ @@ -38,7 +38,7 @@ const colors = [ } function deleteToDo(event) { - toDoNum--; + toDoNum <= 0 ? toDoNum = 0 : toDoNum-- ; toDoInfo.innerText =`(${toDoNum})`; const deletetoDoList = event.target.parentElement; @@ -74,7 +74,7 @@ const colors = [ const li = event.target.parentElement; li.remove(); - doneNum--; + doneNum <= 0 ? doneNum = 0 : doneNum--; doneInfo.innerText =`(${doneNum})`; } From f8402fb5acb5ae6b99da6e0ec73db464129401e0 Mon Sep 17 00:00:00 2001 From: YoommY Date: Sun, 20 Mar 2022 16:24:48 +0900 Subject: [PATCH 17/19] modified: center display, enter submit --- index.html | 7 +++++-- script.js | 10 +++++++--- style.css | 2 +- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index b0a4f6c..6a8e79e 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,11 @@
❗투두리스트❗
- - +
+ + +
+
diff --git a/script.js b/script.js index 97a3661..08fe34f 100644 --- a/script.js +++ b/script.js @@ -20,7 +20,8 @@ const colors = [ const doneList = document.getElementById("done-list"); const doneInfo = document.getElementById("done-info"); const finishtoDo = document.getElementById("finish-todo"); - + const submitform = document.getElementById("submit-form"); + let toDoNum = 0; let doneNum = 0; @@ -79,8 +80,10 @@ const colors = [ } - function toDoInput(){ - const newTodo = toDo.value; + function toDoInput(event){ + + event.preventDefault(); + const newTodo = toDo.value; toDo.value = ""; makeToDo(newTodo); @@ -110,5 +113,6 @@ const colors = [ } + submitform.addEventListener("submit", toDoInput); toDoButton.addEventListener("click", toDoInput); \ No newline at end of file diff --git a/style.css b/style.css index 4e6022e..d2ea1ea 100644 --- a/style.css +++ b/style.css @@ -14,7 +14,7 @@ body{ height: 100vh; justify-content: center; align-items: center; - margin: 0; + margin: 0 auto; } From 18183c3186187ef0b1bf2168a671abb64342d557 Mon Sep 17 00:00:00 2001 From: YoommY Date: Sun, 20 Mar 2022 16:31:23 +0900 Subject: [PATCH 18/19] modified: overflow --- style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style.css b/style.css index d2ea1ea..1ef73c5 100644 --- a/style.css +++ b/style.css @@ -62,11 +62,15 @@ body{ margin-top: 20px; flex: 0.5; border-bottom: 1px solid grey; + + overflow: auto; } .done-box{ margin: 20px; flex: 0.5; + + overflow: auto; } From b4e3b7da5d4ab0aa3fa1e0656904b1bd57b1e8c1 Mon Sep 17 00:00:00 2001 From: YoommY Date: Fri, 9 Sep 2022 02:10:32 +0900 Subject: [PATCH 19/19] Update Example --- index.html | 11 +-- script.js | 222 +++++++++++++++++++++++++---------------------------- style.css | 133 +++++++++++++++++--------------- 3 files changed, 176 insertions(+), 190 deletions(-) diff --git a/index.html b/index.html index 6a8e79e..2c5b21a 100644 --- a/index.html +++ b/index.html @@ -13,26 +13,21 @@
- +
❗투두리스트❗
-
❗투두리스트❗
-
- -
+
✍️To Do(0)
-
✍️To Do(0)
-
+
👻Done(0)
-
👻Done(0)
diff --git a/script.js b/script.js index 08fe34f..3a0612b 100644 --- a/script.js +++ b/script.js @@ -1,118 +1,104 @@ -const colors = [ - "#0fbcf9", - "#00d8d6", - "#05c46b", - "#ffc048", - "#ffdd59" - - ]; - - - let firstColor = colors[Math.floor(Math.random() * colors.length)]; - let secondColor = colors[Math.floor(Math.random() * colors.length)]; - - document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`; - - const toDoButton = document.getElementById("todo-button"); - const toDo = document.getElementById("todo"); - const toDoList = document.getElementById("todo-list"); - const toDoInfo = document.getElementById("todo-info"); - const doneList = document.getElementById("done-list"); - const doneInfo = document.getElementById("done-info"); - const finishtoDo = document.getElementById("finish-todo"); - const submitform = document.getElementById("submit-form"); - - let toDoNum = 0; - let doneNum = 0; - - function finish(){ - if(toDoNum === 0){ - finishtoDo.classList.remove("hidden"); - - } - - else{ - finishtoDo.classList.add("hidden"); - } - - - } - - function deleteToDo(event) { - toDoNum <= 0 ? toDoNum = 0 : toDoNum-- ; - toDoInfo.innerText =`(${toDoNum})`; - - const deletetoDoList = event.target.parentElement; - deletetoDoList.remove(); - - finish(); - - } - - function moveToDo(event) { - deleteToDo(event); - - const removeList = document.createElement("div"); - const removeItem = event.target; - const deleteButton = document.createElement("span"); - deleteButton.innerText = "❌"; - - removeList.style.color ="grey"; - - removeList.appendChild(removeItem); - removeList.appendChild(deleteButton); - doneList.appendChild(removeList); - - - doneNum++; - doneInfo.innerText =`(${doneNum})`; - - deleteButton.addEventListener("click", trashDoneToDo); - - } - - function trashDoneToDo(event) { - const li = event.target.parentElement; - li.remove(); - - doneNum <= 0 ? doneNum = 0 : doneNum--; - doneInfo.innerText =`(${doneNum})`; - - } - - function toDoInput(event){ - - event.preventDefault(); - const newTodo = toDo.value; - toDo.value = ""; - makeToDo(newTodo); - - } - - function makeToDo(newTodo) { - toDoNum++; - toDoInfo.innerText = `(${toDoNum})`; - - const li = document.createElement("div"); - const toDoItem = document.createElement("span"); - const deleteButton = document.createElement("span"); - - li.style.margin= "10px"; - - toDoItem.innerText = newTodo; - deleteButton.innerText = "❌"; - - li.appendChild(toDoItem); - li.appendChild(deleteButton); - toDoList.appendChild(li); - - toDoItem.addEventListener("click", moveToDo); - deleteButton.addEventListener("click", deleteToDo); - - finish(); - - } - - submitform.addEventListener("submit", toDoInput); - toDoButton.addEventListener("click", toDoInput); - \ No newline at end of file +document.body.style.background = `linear-gradient(to right, #c7efff, #ffccf6)`; + +const toDoButton = document.getElementById('todo-button'); +const toDo = document.getElementById('todo'); +const toDoList = document.getElementById('todo-list'); +const toDoInfo = document.getElementById('todo-info'); +const doneList = document.getElementById('done-list'); +const doneInfo = document.getElementById('done-info'); +const submitform = document.getElementById('submit-form'); + +let toDoNum = 0; +let doneNum = 0; + +//todo에서 삭제 +function deleteToDo(event) { + toDoNum <= 0 ? (toDoNum = 0) : toDoNum--; + toDoInfo.innerText = `(${toDoNum})`; + + const deletetoDoList = event.target.parentElement; + deletetoDoList.remove(); +} + +function moveToDo(event) { + deleteToDo(event); + + const removeList = document.createElement('div'); + const removeItem = event.target; + const deleteButton = document.createElement('span'); + + deleteButton.innerText = '❌'; + + removeList.appendChild(removeItem); + removeList.appendChild(deleteButton); + doneList.appendChild(removeList); + + doneNum++; + + removeItem.removeEventListener('click', moveToDo); + removeItem.addEventListener('click', moveDoneToDo); + deleteButton.addEventListener('click', trashDoneToDo); + + toDoInfo.innerText = `(${toDoNum})`; + doneInfo.innerText = `(${doneNum})`; +} + +function moveDoneToDo(event) { + trashDoneToDo(event); + + const removeList = document.createElement('div'); + const removeItem = event.target; + const deleteButton = document.createElement('span'); + + deleteButton.innerText = '❌'; + + removeList.appendChild(removeItem); + removeList.appendChild(deleteButton); + toDoList.appendChild(removeList); + + toDoNum++; + + removeItem.removeEventListener('click', moveDoneToDo); + removeItem.addEventListener('click', moveToDo); + deleteButton.addEventListener('click', deleteToDo); + + toDoInfo.innerText = `(${toDoNum})`; + doneInfo.innerText = `(${doneNum})`; +} + +function trashDoneToDo(event) { + const li = event.target.parentElement; + li.remove(); + + doneNum <= 0 ? (doneNum = 0) : doneNum--; + doneInfo.innerText = `(${doneNum})`; +} + +function toDoInput(event) { + event.preventDefault(); + const newTodo = toDo.value; + toDo.value = ''; + makeToDo(newTodo); +} + +function makeToDo(newTodo) { + toDoNum++; + toDoInfo.innerText = `(${toDoNum})`; + + const li = document.createElement('div'); + const toDoItem = document.createElement('span'); + const deleteButton = document.createElement('span'); + + toDoItem.innerText = newTodo; + deleteButton.innerText = '❌'; + + li.appendChild(toDoItem); + li.appendChild(deleteButton); + toDoList.appendChild(li); + + toDoItem.addEventListener('click', moveToDo); + deleteButton.addEventListener('click', deleteToDo); +} + +submitform.addEventListener('submit', toDoInput); +toDoButton.addEventListener('click', toDoInput); diff --git a/style.css b/style.css index 1ef73c5..e64a064 100644 --- a/style.css +++ b/style.css @@ -1,88 +1,93 @@ @font-face { - font-family: 'SuncheonB'; - src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') format('woff'); - font-weight: normal; - font-style: normal; + font-family: 'SuncheonB'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') + format('woff'); + font-weight: normal; + font-style: normal; } -body{ - - font-family: 'SuncheonB'; - font-size: 15px; - display: flex; - width: 100vh; - height: 100vh; - justify-content: center; - align-items: center; - margin: 0 auto; - - +body { + font-family: 'SuncheonB'; + font-size: 15px; + display: flex; + width: 100vh; + height: 100vh; + justify-content: center; + align-items: center; + margin: 0 auto; } -.whiteBox{ - - - text-align: center; - width: 360px; - height: 600px; - background-color: white; - display: flex; - flex-direction: column; - border-bottom: 1px solid grey; - border-radius: 9px; - - - +.whiteBox { + text-align: left; + width: 360px; + height: 600px; + background-color: white; + display: flex; + flex-direction: column; + border-bottom: 1px solid grey; + border-radius: 9px; + padding: 10px; } -.title-font{ - font-size: 20px; +.title-font { + font-size: 20px; + margin-bottom: 20px; } -#todo{ - width: 300px; - height: 50px; - border-radius: 9px; - font-family: 'SuncheonB'; +#todo { + width: 300px; + height: 50px; + border-radius: 9px; + font-family: 'SuncheonB'; } -.input-box{ - - flex: 0.3; - border-bottom: 1px solid grey; - +#submit-form { + height: 76px; + margin-top: 10px; } - -.todo-list{ - margin: 10px; - +.input-box { + height: 100px; + border-bottom: 1px solid grey; + text-align: center; } -.todo-box{ - margin-top: 20px; - flex: 0.5; - border-bottom: 1px solid grey; +#todo-list { + cursor: pointer; + color: black; +} - overflow: auto; +#done-list { + color: grey; + text-decoration: line-through; + cursor: pointer; } +.todo-box { + padding: 20px; + flex: 0.5; + border-bottom: 1px solid grey; -.done-box{ - margin: 20px; - flex: 0.5; + overflow: auto; +} +.todo-list-title-font { + font-size: 20px; + margin-left: 20px; +} +.done-box { + margin: 20px; + flex: 0.5; - overflow: auto; - + overflow: auto; } -#finish-todo{ - margin-top: 30px; - font-size: 30px; +#finish-todo { + margin-top: 30px; + font-size: 30px; } -.hidden{ - display : none; +.hidden { + display: none; } -#todo-button{ - cursor: pointer; -} \ No newline at end of file +#todo-button { + cursor: pointer; +}