From 114f65cb42eedb48ec9207eeb0ff4555a284efc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EB=AF=BC=EC=9E=AC?= Date: Wed, 4 Sep 2024 14:24:36 +0900 Subject: [PATCH 01/10] Test --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d241b1b..a57dd22 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,9 @@ -
+
+ Test +
From fc0b0e11c5c0f61728dc8b8d66c6c9c9a18285a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EB=AF=BC=EC=9E=AC?= Date: Fri, 6 Sep 2024 22:43:25 +0900 Subject: [PATCH 02/10] =?UTF-8?q?Feat&Style:=20=EC=A0=84=EC=B2=B4=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20UI=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=20new=20Date?= =?UTF-8?q?()=EB=A1=9C=20=EB=82=A0=EC=A7=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkmark.svg | 3 +++ index.html | 15 +++++++++-- script.js | 10 ++++++++ style.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 checkmark.svg diff --git a/checkmark.svg b/checkmark.svg new file mode 100644 index 0000000..8738f16 --- /dev/null +++ b/checkmark.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/index.html b/index.html index a57dd22..8f3b057 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,20 @@ -
- Test +
+
+

To Do โœ๏ธ

+
+
+
+

Today's To-Do ๐Ÿ€

+

+
+ +
+
+ diff --git a/script.js b/script.js index 355dcc2..bd22b85 100644 --- a/script.js +++ b/script.js @@ -1 +1,11 @@ //๐Ÿ˜CEOS 20๊ธฐ ํ”„๋ก ํŠธ์—”๋“œ ํŒŒ์ดํŒ…๐Ÿ˜ + +document.addEventListener("DOMContentLoaded", function () { + const today = new Date(); // ํ˜„์žฌ ๋‚ ์งœ์™€ ์‹œ๊ฐ„์„ ๊ฐ€์ ธ์˜ค๋Š” Date ๊ฐ์ฒด + const options = { month: "long", day: "numeric", weekday: "long" }; + // ๋‚ ์งœ, ์š”์ผ ๋“ฑ ํฌ๋งท ์‹œ month์™€ weekday๋Š” ๊ธด ํ˜•์‹์œผ๋กœ (9์›”, ๋ชฉ์š”์ผ) day๋Š” ์ˆซ์ž ํ˜•์‹ (5, 25) + + const formattedDate = today.toLocaleDateString("ko-KR", options); // options ํ˜•์‹์˜ ํ•œ๊ตญ์–ด ๋‚ ์งœ + document.querySelector(".Date").textContent = formattedDate; + // .Date ์š”์†Œ์˜ textcontent๋ฅผ formattedDate์œผ๋กœ ์„ค์ • +}); \ No newline at end of file diff --git a/style.css b/style.css index 599136a..67a37ef 100644 --- a/style.css +++ b/style.css @@ -1 +1,71 @@ /* ๋ณธ์ธ์˜ ๋””์ž์ธ ๊ฐ๊ฐ์„ ์ตœ๋Œ€ํ•œ ๋ฐœํœ˜ํ•ด์ฃผ์„ธ์š”! */ +body{ + margin: 0; +} +.PageContainer{ + display: flex; + width: 100vw; + height: 100vh; + flex-direction: column; /* ์š”์†Œ ์ •๋ ฌ ๋ฐฉํ–ฅ: ์„ธ๋กœ */ + align-items: center; /* ์ˆ˜ํ‰ ์ •๋ ฌ, ์„ธ๋กœ ์ถ•์ด ์ฃผ์ถ•์ด๋ฏ€๋กœ ๊ต์ฐจ ์ถ•์ธ ๊ฐ€๋กœ ์ถ•์—์„œ์˜ ์ •๋ ฌ์„ ๋‹ด๋‹น */ + overflow-x:hidden; /* ๊ฐ€๋กœ ์Šคํฌ๋กค ์ œ๊ฑฐ */ +} +header{ + display: flex; + background-color: rgba(110, 190, 110, 0.895); + width: 100%; /* ํ™”๋ฉด ๊ฝ‰ ์ฐจ๊ฒŒ */ + height: 4rem; + color: white; + font-weight: bold; + align-items: center; /* ์ฃผ์ถ•: ๊ฐ€๋กœ ์ถ•, ์ˆ˜์ง ์ •๋ ฌ*/ + justify-content: center; /* ์ˆ˜ํ‰ ์ •๋ ฌ */ +} + +h1, h2{ + display: flex; + margin: 0; +} + +main{ + display: flex; + flex-direction: column; + width: 30rem; + height: 100%; + box-shadow: 0 0.875rem 1.75rem rgba(0,0,0,0.25), 0 0.625rem 0.625rem rgba(0,0,0,0.22); + /*box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color]; ๊นŠ์ด๊ฐ๊ณผ ์ž…์ฒด๊ฐ์„ ๋”ํ•˜๊ธฐ ์œ„ํ•ด 2๊ฐœ ๊ทธ๋ฆผ์ž ์‚ฌ์šฉ*/ +} + +.DateContainer{ + display: flex; + flex-direction: column; + margin: 3.125rem; + gap: 0.3125rem; + color: rgb(110, 190, 110); +} +.Date{ + display: flex; + font-size: 0.9375rem; +} + +form { + display: flex; + position: relative; + width: calc(100% - 5rem); + padding: 1.3rem 1.3rem 1.3rem 3.3rem; /* background๋กœ ๋„ฃ์€ ์ฒดํฌ ์ด๋ฏธ์ง€์™€ ์•ˆ ๊ฒน์น˜๋„๋ก ์™ผ์ชฝ ํŒจ๋”ฉ ์ถ”๊ฐ€*/ + box-shadow: 0 0 5px rgba(0, 0, 0, 0.11), 0 5px 5px rgba(0, 0, 0, 0.178); + border-radius: 0.625rem; + background-image: url('checkmark.svg'); + background-size: 1.5rem; + background-position: 1rem center; /* background ์ด๋ฏธ์ง€ ์œ„์น˜, ์™ผ์ชฝ์œผ๋กœ๋ถ€ํ„ฐ 1rem ๋–จ์–ด์ง„ ๊ณณ*/ + background-repeat: no-repeat; +} + +input{ + width:calc(100% - 4rem); /* ์™ผ์ชฝ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์ด ์ฐจ์ง€ํ•œ ๊ณต๊ฐ„์„ ์ œ์™ธํ•œ ๋ถ€๋ถ„*/ + font-size: 1rem; + border: none; + outline: 0; +} +input::-webkit-input-placeholder { + color: rgb(94, 169, 139); +} \ No newline at end of file From 62f55d129cd5532126bd6060adfe4aabf57fbd6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EB=AF=BC=EC=9E=AC?= Date: Fri, 6 Sep 2024 22:45:55 +0900 Subject: [PATCH 03/10] =?UTF-8?q?Feat:=20Todo=20=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=EC=B0=BD=EC=97=90=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + style.css | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/index.html b/index.html index 8f3b057..572e7b3 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@

Today's To-Do ๐Ÿ€

+
diff --git a/style.css b/style.css index 67a37ef..8a7abff 100644 --- a/style.css +++ b/style.css @@ -68,4 +68,21 @@ input{ } input::-webkit-input-placeholder { color: rgb(94, 169, 139); +} +#submitbtn { + position: absolute; /* ๋ถ€๋ชจ ์š”์†Œ์ธ form ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ */ + top: 50%; /* ๋ถ€๋ชจ ์š”์†Œ์˜ ์ƒ๋‹จ์—์„œ 50% ์ง€์ ์— ๋ฐฐ์น˜ */ + transform: translateY(-50%); /* ์ž์‹ ์˜ ๋†’์ด์˜ 50%๋งŒํผ ์œ„์ชฝ์œผ๋กœ ์ด๋™, ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ ์‹œํ‚ค๊ธฐ */ + right: 1.25rem; /* ๋ถ€๋ชจ ์š”์†Œ์˜ ์˜ค๋ฅธ์ชฝ์—์„œ 1.25rem */ + background-color: transparent; + color: rgb(94, 169, 139); + padding: 5px 10px; + border: 1.5px solid rgb(94, 169, 139); + border-radius: 0.625rem; + cursor: pointer; +} + +#submitbtn:hover { + background-color:#b5b6b779; + font-weight: bold; } \ No newline at end of file From 3247335c87eefe187396e9a98f9e78cf1e70e3f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EB=AF=BC=EC=9E=AC?= Date: Fri, 6 Sep 2024 22:58:50 +0900 Subject: [PATCH 04/10] =?UTF-8?q?Feat:=20todo=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84,?= =?UTF-8?q?=20localStorage=20=EC=9D=B4=EC=9A=A9=ED=95=B4=EC=84=9C=20?= =?UTF-8?q?=EA=B8=B0=EC=A1=B4=20=ED=88=AC=EB=91=90=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EB=B6=88=EB=9F=AC=EC=98=A4=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + script.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+) diff --git a/index.html b/index.html index 572e7b3..346f171 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@

Today's To-Do ๐Ÿ€

+
    diff --git a/script.js b/script.js index bd22b85..dc3fb89 100644 --- a/script.js +++ b/script.js @@ -8,4 +8,70 @@ document.addEventListener("DOMContentLoaded", function () { const formattedDate = today.toLocaleDateString("ko-KR", options); // options ํ˜•์‹์˜ ํ•œ๊ตญ์–ด ๋‚ ์งœ document.querySelector(".Date").textContent = formattedDate; // .Date ์š”์†Œ์˜ textcontent๋ฅผ formattedDate์œผ๋กœ ์„ค์ • + const todoInput = document.querySelector("input"); // input ์š”์†Œ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ + const todoBox = document.querySelector(".todo-box"); // class๊ฐ€ .todo-box์ธ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ + const submitBtn = document.getElementById("submitbtn"); // id๊ฐ€ submitbtn์ธ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ + + let todoList = []; // ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅ๋  todo ๋ฐฐ์—ด + + function setting() { + loadStorage(); // localStorage์— ์ €์žฅ๋œ todoList์˜ todo๋“ค ๋ถˆ๋Ÿฌ์˜ค๊ธฐ + submitBtn.addEventListener("click", function (event) { + event.preventDefault(); + createList(); + }); + } + + function createList() { + const newTodo = todoInput.value.trim(); /* ๋ฌธ์ž์—ด ์•ž ๋’ค ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•˜๋Š” trim์„ ์ด์šฉ, ์‚ฌ์šฉ์ž๊ฐ€ input์— ์ž…๋ ฅํ•œ todo๋ฅผ ์ €์žฅ*/ + if (newTodo === "") return; /* ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•˜์ง€ ์•Š์•˜์œผ๋ฉด ํ•จ์ˆ˜ ์ข…๋ฃŒ */ + + todoList.push({ text: newTodo, completed: false }); /* ๋ฐฐ์—ด์— ์ž…๋ ฅ ๊ฐ’ ์ €์žฅ */ + saveStorage(); /* list์— ์ƒˆ๋กœ์šด todo๊ฐ€ ์ถ”๊ฐ€ ๋จ์œผ๋กœ์จ ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋‹ˆ ๋‹ค์‹œ localStorage์— todoList ์ €์žฅ */ + displayTodo(newTodo, false); + todoInput.value = ""; /* ๋ฐฐ์—ด์— todo๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ Œ๋”๋ง ํ–ˆ๋‹ค๋ฉด input์„ ์ง€์›Œ์„œ ๋‹ค์‹œ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋„๋ก */ + } + + function saveStorage() { + localStorage.setItem("todos", JSON.stringify(todoList)); /*localStorage๋Š” ๋ฌธ์ž์—ด ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ๋งŒ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, JSON.stringify()๋ฅผ ์‚ฌ์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ JSON ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„ ์ €์žฅ. ๋‹ค์‹œ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๋Š” JSON.parse() ์ด์šฉ*/ + } /* setItem(key,value) ํŠน์ • key์— ํ•ด๋‹น value ํ• ๋‹น */ + + function loadStorage() { + const storedTodos = localStorage.getItem("todos"); /* ๊ธฐ์กด์— localStorage์— ์ €์žฅ๋˜์–ด์žˆ๋˜ ๋ฐฐ์—ด์„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ, ๋งŒ์•ฝ ์—†๋‹ค๋ฉด null์ด ์ €์žฅ ๋จ */ + if (storedTodos) { + todoList = JSON.parse(storedTodos); + todoList.forEach((todo) => displayTodo(todo.text, todo.completed)); // todoList ๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๋ฉฐ ์ €์žฅ๋œ ๋ชจ๋“  todo๋ฅผ ํ™”๋ฉด์— ๋ Œ๋”๋ง + } + } + + function displayTodo(todoText, isCompleted) { + const li = document.createElement("li"); // ์ƒˆ๋กœ์šด
  • ์š”์†Œ ์ƒ์„ฑ. ํ•˜๋‚˜์˜ todo๋ฅผ ๋‚˜ํƒ€๋ƒ„ + + const checkbox = document.createElement("input"); // ์ƒˆ๋กœ์šด input ์š”์†Œ checkbox ์ƒ์„ฑ + checkbox.type = "checkbox"; // ์ด ์š”์†Œ์˜ type = checkbox + checkbox.classList.add("todo-checkbox"); // ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•ด ํด๋ž˜์Šค ๋ชฉ๋ก์— ํด๋ž˜์Šค ์ด๋ฆ„ ์ถ”๊ฐ€! ์ฆ‰ checkbox์— ํ• ๋‹น๋˜๋Š” ํด๋ž˜์Šค ์ด๋ฆ„์ด todo-checkbox + checkbox.checked = isCompleted; // isCompleted๊ฐ€ true๋ผ๋ฉด checkbox๊ฐ€ ์ฒดํฌ ๋จ + + checkbox.addEventListener("change", function () { // checkbox์˜ ์ƒํƒœ๊ฐ€ ๋ฐ”๋€” ๋•Œ, ์ฆ‰ checked์˜ ์†์„ฑ์ด ๋ณ€๊ฒฝ๋  ๋•Œ (์‚ฌ์šฉ์ž๊ฐ€ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์ฒดํฌํ•˜๊ฑฐ๋‚˜ ํ•ด์ œํ•  ๋•Œ) ์‹คํ–‰๋  ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ + li.querySelector("span").style.textDecoration = checkbox.checked ? "line-through" : "none"; + }); //
  • ์š”์†Œ์˜ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ์ฐพ์•„ ์Šคํƒ€์ผ๋ง. ๋งŒ์•ฝ ์ฒดํฌ๋ฐ•์Šค๊ฐ€ ์ฒดํฌ ๋˜์–ด์žˆ์œผ๋ฉด? ์„ ์„ ๊ธ‹๊ณ  ํ•ด์ œ๋˜์–ด ์žˆ์œผ๋ฉด ์„ ์„ ์—†์•ค๋‹ค! + + const todoSpan = document.createElement("span"); //
  • ์š”์†Œ ์•ˆ์— ์“ฐ์—ฌ์งˆ ํ…์ŠคํŠธ๋ฅผ ์š”์†Œ๋กœ ์„ค์ • + todoSpan.classList.add("todoSpan"); + todoSpan.textContent = todoText; // ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ ๋ฐ›์€ input์˜ text๋ฅผ ๋ณ€์ˆ˜ todoSpan์˜ ํ…์ŠคํŠธ ๋‚ด์šฉ์œผ๋กœ ์ €์žฅ + if (isCompleted) { + todoSpan.style.textDecoration = "line-through"; + } + + const deleteBtn = document.createElement("button"); // ์ƒˆ๋กœ์šด + -
      +
        diff --git a/script.js b/script.js index 266a4e8..bd1dc85 100644 --- a/script.js +++ b/script.js @@ -6,12 +6,14 @@ document.addEventListener("DOMContentLoaded", function () { // ๋‚ ์งœ, ์š”์ผ ๋“ฑ ํฌ๋งท ์‹œ month์™€ weekday๋Š” ๊ธด ํ˜•์‹์œผ๋กœ (9์›”, ๋ชฉ์š”์ผ) day๋Š” ์ˆซ์ž ํ˜•์‹ (5, 25) const formattedDate = today.toLocaleDateString("ko-KR", options); // options ํ˜•์‹์˜ ํ•œ๊ตญ์–ด ๋‚ ์งœ - document.querySelector(".Date").textContent = formattedDate; + document.querySelector(".date").textContent = formattedDate; // .Date ์š”์†Œ์˜ textcontent๋ฅผ formattedDate์œผ๋กœ ์„ค์ • const todoInput = document.querySelector("input"); // input ์š”์†Œ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ - const todoBox = document.querySelector(".todo-box"); // class๊ฐ€ .todo-box์ธ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ - const submitBtn = document.getElementById("submitbtn"); // id๊ฐ€ submitbtn์ธ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ + const todoBox = document.querySelector(".todoBox"); // class๊ฐ€ .todo-box์ธ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ + const submitBtn = document.getElementById("submitBtn"); // id๊ฐ€ submitbtn์ธ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๊ธฐ + const completedCountElem = document.querySelector(".completedCount"); // ์™„๋ฃŒ๋œ todo ์ˆ˜๋ฅผ ์…€ ์š”์†Œ + const totalCountElem = document.querySelector(".totalCount"); // ์ „์ฒด todo ์ˆ˜๋ฅผ ์…€ ์š”์†Œ let todoList = []; // ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅ๋  todo ๋ฐฐ์—ด @@ -24,10 +26,11 @@ document.addEventListener("DOMContentLoaded", function () { } function createList() { - const newTodo = todoInput.value.trim(); /* ๋ฌธ์ž์—ด ์•ž ๋’ค ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•˜๋Š” trim์„ ์ด์šฉ, ์‚ฌ์šฉ์ž๊ฐ€ input์— ์ž…๋ ฅํ•œ todo๋ฅผ ์ €์žฅ*/ + const newTodo = todoInput.value.trim(); // ๋ฌธ์ž์—ด ์•ž ๋’ค ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•˜๋Š” trim์„ ์ด์šฉ, ์‚ฌ์šฉ์ž๊ฐ€ input์— ์ž…๋ ฅํ•œ todo๋ฅผ ์ €์žฅ if (newTodo === ""){ alert('์˜ค๋Š˜์˜ ํ•  ์ผ์„ ์ ์–ด์ฃผ์„ธ์š”!๐Ÿ€'); - return; /* ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•˜์ง€ ์•Š์•˜์œผ๋ฉด ํ•จ์ˆ˜ ์ข…๋ฃŒ */} + return; // ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•˜์ง€ ์•Š์•˜์œผ๋ฉด ํ•จ์ˆ˜ ์ข…๋ฃŒ + } // ์ด๋ฏธ ๊ฐ™์€ ๋‚ด์šฉ์˜ ํˆฌ๋‘๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธ const isDuplicate = todoList.some((todo) => todo.text === newTodo); //some ๋ฉ”์„œ๋“œ, ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ, ์ฃผ์–ด์ง„ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ์š”์†Œ๊ฐ€ ํ•˜๋‚˜๋ผ๋„ ์žˆ์œผ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ์š”์†Œ๊ฐ€ ์—†์œผ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ @@ -37,22 +40,24 @@ document.addEventListener("DOMContentLoaded", function () { return; // ์ค‘๋ณต๋˜๋ฉด ํ•จ์ˆ˜ ์ข…๋ฃŒ } - todoList.push({ text: newTodo, completed: false }); /* ๋ฐฐ์—ด์— ์ž…๋ ฅ ๊ฐ’ ์ €์žฅ */ - saveStorage(); /* list์— ์ƒˆ๋กœ์šด todo๊ฐ€ ์ถ”๊ฐ€ ๋จ์œผ๋กœ์จ ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋‹ˆ ๋‹ค์‹œ localStorage์— todoList ์ €์žฅ */ + todoList.push({ text: newTodo, completed: false }); // ๋ฐฐ์—ด์— ์ž…๋ ฅ ๊ฐ’ ์ €์žฅ + saveStorage(); // list์— ์ƒˆ๋กœ์šด todo๊ฐ€ ์ถ”๊ฐ€ ๋จ์œผ๋กœ์จ ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋‹ˆ ๋‹ค์‹œ localStorage์— todoList ์ €์žฅ displayTodo(newTodo, false); - todoInput.value = ""; /* ๋ฐฐ์—ด์— todo๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ Œ๋”๋ง ํ–ˆ๋‹ค๋ฉด input์„ ์ง€์›Œ์„œ ๋‹ค์‹œ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋„๋ก */ + todoInput.value = ""; // ๋ฐฐ์—ด์— todo๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ Œ๋”๋ง ํ–ˆ๋‹ค๋ฉด input์„ ์ง€์›Œ์„œ ๋‹ค์‹œ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋„๋ก + updateCounts(); // ์ „์ฒด todo ๊ฐœ์ˆ˜์— +1 } function saveStorage() { - localStorage.setItem("todos", JSON.stringify(todoList)); /*localStorage๋Š” ๋ฌธ์ž์—ด ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ๋งŒ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, JSON.stringify()๋ฅผ ์‚ฌ์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ JSON ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„ ์ €์žฅ. ๋‹ค์‹œ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๋Š” JSON.parse() ์ด์šฉ*/ - } /* setItem(key,value) ํŠน์ • key์— ํ•ด๋‹น value ํ• ๋‹น */ + localStorage.setItem("todos", JSON.stringify(todoList)); //localStorage๋Š” ๋ฌธ์ž์—ด ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ๋งŒ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, JSON.stringify()๋ฅผ ์‚ฌ์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ JSON ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„ ์ €์žฅ. ๋‹ค์‹œ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๋Š” JSON.parse() ์ด์šฉ + } // setItem(key,value) ํŠน์ • key์— ํ•ด๋‹น value ํ• ๋‹น function loadStorage() { - const storedTodos = localStorage.getItem("todos"); /* ๊ธฐ์กด์— localStorage์— ์ €์žฅ๋˜์–ด์žˆ๋˜ ๋ฐฐ์—ด์„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ, ๋งŒ์•ฝ ์—†๋‹ค๋ฉด null์ด ์ €์žฅ ๋จ */ + const storedTodos = localStorage.getItem("todos"); // ๊ธฐ์กด์— localStorage์— ์ €์žฅ๋˜์–ด์žˆ๋˜ ๋ฐฐ์—ด์„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ, ๋งŒ์•ฝ ์—†๋‹ค๋ฉด null์ด ์ €์žฅ ๋จ if (storedTodos) { todoList = JSON.parse(storedTodos); todoList.forEach((todo) => displayTodo(todo.text, todo.completed)); // todoList ๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๋ฉฐ ์ €์žฅ๋œ ๋ชจ๋“  todo๋ฅผ ํ™”๋ฉด์— ๋ Œ๋”๋ง } + updateCounts(); // ์ƒˆ๋กœ ๊ณ ์นจ ์‹œ ๊ธฐ์กด todoList ๋ฐฐ์—ด ๋ถˆ๋Ÿฌ์™€์„œ ์ด ๊ฐœ์ˆ˜ ๋งž๊ฒŒ ๋ Œ๋”๋ง } function displayTodo(todoText, isCompleted) { @@ -60,7 +65,7 @@ document.addEventListener("DOMContentLoaded", function () { const checkbox = document.createElement("input"); // ์ƒˆ๋กœ์šด input ์š”์†Œ checkbox ์ƒ์„ฑ checkbox.type = "checkbox"; // ์ด ์š”์†Œ์˜ type = checkbox - checkbox.classList.add("todo-checkbox"); // ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•ด ํด๋ž˜์Šค ๋ชฉ๋ก์— ํด๋ž˜์Šค ์ด๋ฆ„ ์ถ”๊ฐ€! ์ฆ‰ checkbox์— ํ• ๋‹น๋˜๋Š” ํด๋ž˜์Šค ์ด๋ฆ„์ด todo-checkbox + checkbox.classList.add("todoCheckBox"); // ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•ด ํด๋ž˜์Šค ๋ชฉ๋ก์— ํด๋ž˜์Šค ์ด๋ฆ„ ์ถ”๊ฐ€! ์ฆ‰ checkbox์— ํ• ๋‹น๋˜๋Š” ํด๋ž˜์Šค ์ด๋ฆ„์ด todo-checkbox checkbox.checked = isCompleted; // isCompleted๊ฐ€ true๋ผ๋ฉด checkbox๊ฐ€ ์ฒดํฌ ๋จ checkbox.addEventListener("change", function () { // checkbox์˜ ์ƒํƒœ๊ฐ€ ๋ฐ”๋€” ๋•Œ, ์ฆ‰ checked์˜ ์†์„ฑ์ด ๋ณ€๊ฒฝ๋  ๋•Œ (์‚ฌ์šฉ์ž๊ฐ€ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์ฒดํฌํ•˜๊ฑฐ๋‚˜ ํ•ด์ œํ•  ๋•Œ) ์‹คํ–‰๋  ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ @@ -77,7 +82,7 @@ document.addEventListener("DOMContentLoaded", function () { const deleteBtn = document.createElement("button"); // ์ƒˆ๋กœ์šด +
          diff --git a/script.js b/script.js index 205f578..80b5b57 100644 --- a/script.js +++ b/script.js @@ -84,13 +84,16 @@ document.addEventListener("DOMContentLoaded", function () { deleteBtn.textContent = "์‚ญ์ œ"; // deleteBtn์˜ ํ…์ŠคํŠธ ๋‚ด์šฉ์„ ์‚ญ์ œ๋ผ๊ณ  ์ง€์ • deleteBtn.classList.add("deleteBtn"); deleteBtn.addEventListener("click", function () { // ๋ฒ„ํŠผ์ด ํด๋ฆญ ๋˜์—ˆ์„ ๋•Œ ์‹คํ–‰๋  ํ•จ์ˆ˜!! - alert('์ •๋ง ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?'); - deleteTodo(todoText, li); + if(confirm("์ •๋ง ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?")){ + alert("todo๊ฐ€ ์‚ญ์ œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค."); + deleteTodo(todoText, li); + }else{ + alert("Kepp going!๐Ÿ”ฅ"); + } }); - li.appendChild(checkbox); // ์ƒˆ๋กœ ๋งŒ๋“  ์š”์†Œ (์ฒดํฌ๋ฐ•์Šค, ํ…์ŠคํŠธ, ์‚ญ์ œ ๋ฒ„ํŠผ)์„
        • ์š”์†Œ์— ์ถ”๊ฐ€ํ•ด์„œ ํ•˜๋‚˜์˜ todo ํ•ญ๋ชฉ ์™„์„ฑ! - li.appendChild(todoSpan); // ํ•  ์ผ ํ…์ŠคํŠธ๋ฅผ ๋‹ด์€ ์š”์†Œ ์ถ”๊ฐ€ - li.appendChild(deleteBtn); // ์‚ญ์ œ ๋ฒ„ํŠผ ์ถ”๊ฐ€ + li.append(checkbox, todoSpan, deleteBtn); // appendChild๋ฅผ append๋กœ ๊ฐ„์†Œํ™”! + todoBox.appendChild(li); //
            ์š”์†Œ๋ฅผ ๋ถˆ๋Ÿฌ ์˜จ todoBox์—
          • ๋“ค ์ถ”๊ฐ€ } @@ -115,15 +118,26 @@ document.addEventListener("DOMContentLoaded", function () { updateCounts(); } + let isAllCompleted = JSON.parse(localStorage.getItem("isAllCompleted")) || false; // localStorage์—์„œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์—†์œผ๋ฉด false๋กœ ์ดˆ๊ธฐํ™” + function updateCounts() { const totalTodos = todoList.length; - const completedTodos = todoList.filter((todo) => todo.completed).length; // ์™„๋ฃŒ๋œ ๊ฒƒ๋งŒ ํ•„ํ„ฐ๋ง + const completedTodos = todoList.filter((todo) => todo.completed).length; // ์™„๋ฃŒ๋œ todo ํ•„ํ„ฐ๋ง completedCountElem.textContent = completedTodos; totalCountElem.textContent = totalTodos; - if (totalTodos > 0 && completedTodos === totalTodos) { - alert('์ถ•ํ•˜ํ•ฉ๋‹ˆ๋‹ค! ๋ชจ๋“  ํ•  ์ผ์„ ์™„๋ฃŒํ•˜์…จ์Šต๋‹ˆ๋‹ค! ๐ŸŽ‰'); + + // ๋งŒ์•ฝ ํ•  ์ผ์ด ๋ชจ๋‘ ์™„๋ฃŒ๋˜์—ˆ๊ณ , ๊ทธ ์ƒํƒœ๊ฐ€ ์ฒ˜์Œ์œผ๋กœ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ์—๋งŒ alert ํ‘œ์‹œ + if (totalTodos > 0 && completedTodos === totalTodos && !isAllCompleted) { + alert('์ถ•ํ•˜ํ•ฉ๋‹ˆ๋‹ค! ๋ชจ๋“  ํ•  ์ผ์„ ์™„๋ฃŒํ•˜์…จ์Šต๋‹ˆ๋‹ค! ๐ŸŽ‰'); + isAllCompleted = true; // ๋ชจ๋“  ํ•  ์ผ์ด ์™„๋ฃŒ๋˜์—ˆ๋‹ค๊ณ  ๊ธฐ๋ก + localStorage.setItem("isAllCompleted", JSON.stringify(isAllCompleted)); // ์ƒํƒœ๋ฅผ localStorage์— ์ €์žฅ + } else if (completedTodos < totalTodos) { + // ํ•  ์ผ์ด ์‚ญ์ œ๋˜๊ฑฐ๋‚˜ ์ƒˆ๋กœ ์ถ”๊ฐ€๋˜๋ฉด ์ƒํƒœ๋ฅผ ์ดˆ๊ธฐํ™” + isAllCompleted = false; + localStorage.setItem("isAllCompleted", JSON.stringify(isAllCompleted)); // ์ƒํƒœ๋ฅผ localStorage์— ์ €์žฅ } -} + } + setting(); }); \ No newline at end of file diff --git a/style.css b/style.css index 9ac51bf..709aa87 100644 --- a/style.css +++ b/style.css @@ -34,8 +34,7 @@ h2{ main{ display: flex; flex-direction: column; - max-width: 30rem; - width: auto; + width: 30rem; height: 90%; /* ํ™”๋ฉด์˜ 100% ๋†’์ด๋กœ ๊ณ ์ • */ overflow-y: scroll; /* ํ•  ์ผ์ด ๋งŽ์•„์ง€๋ฉด ์Šคํฌ๋กค์ด ์ƒ๊ธฐ๋„๋ก ์„ค์ • */ box-shadow: 0 0.875rem 1.75rem rgba(0,0,0,0.25), 0 0.625rem 0.625rem rgba(0,0,0,0.22); @@ -131,8 +130,9 @@ input::-webkit-input-placeholder { .todoBox .todoSpan{ width: 15.625rem; + overflow-wrap: break-word; } - + /* ์ƒˆ๋กœ์šด ์š”์†Œ๊ฐ€ ์ถ”๊ฐ€๋  ๋•Œ slide ๋˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜ */ @keyframes slideDown { 0% {