From 93303f4bfed1802dbb04548de06d3f5441919eab Mon Sep 17 00:00:00 2001 From: Clearsu Date: Sun, 15 Oct 2023 16:50:58 +0900 Subject: [PATCH 01/12] [Feat] basic to-do #1 --- index.html | 20 ++++++++++++++++++++ style.css | 35 +++++++++++++++++++++++++++++++++++ todo.js | 14 ++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 index.html create mode 100644 style.css create mode 100644 todo.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..e76290e --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + jincpark's To-Do list + + +
+

To-Do list

+
+ + +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d7d6799 --- /dev/null +++ b/style.css @@ -0,0 +1,35 @@ +body { + background-color: rgb(215, 255, 215); + text-align: center; +} + +#app { + background-color: white; +} + +#todo-form { + padding: 10px; +} + +#todo-input { + padding: 10px; +} + +.todo-submit-button { + background-color: rgb(123, 226, 123); + border-radius: 10px; + border-color: white; + padding: 10px; + color: white; +} + +.todo-submit-button:hover { + background-color: rgb(161, 251, 161); + cursor: pointer; +} + +li { + background-color: rgb(167, 253, 167); + border-radius: 10px; + padding: 10px; +} \ No newline at end of file diff --git a/todo.js b/todo.js new file mode 100644 index 0000000..2048dc3 --- /dev/null +++ b/todo.js @@ -0,0 +1,14 @@ +function addTodo (event) { + event.preventDefault(); + + const inputValue = document.getElementById('todo-input').value; + + if (inputValue.trim()) { + const newTodoItem = document.createElement('li'); + newTodoItem.textContent = inputValue; + document.getElementById('todo-list').appendChild(newTodoItem); + document.getElementById('todo-input').value = ''; + } +} + +document.getElementById('todo-form').addEventListener('submit', addTodo); \ No newline at end of file From 05579e4a530701af847ceff1e0225bccb24898b2 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Sun, 15 Oct 2023 17:02:55 +0900 Subject: [PATCH 02/12] [Feat] checkbox #1 --- style.css | 11 +++++++++++ todo.js | 22 ++++++++++++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index d7d6799..3cd10eb 100644 --- a/style.css +++ b/style.css @@ -28,8 +28,19 @@ body { cursor: pointer; } +ul { + padding: 0; +} + li { + list-style-type: none; background-color: rgb(167, 253, 167); border-radius: 10px; padding: 10px; + margin: 10px; +} + +.todo-checkbox { + width: 20px; + height: 20px; } \ No newline at end of file diff --git a/todo.js b/todo.js index 2048dc3..5d4fa80 100644 --- a/todo.js +++ b/todo.js @@ -5,10 +5,28 @@ function addTodo (event) { if (inputValue.trim()) { const newTodoItem = document.createElement('li'); - newTodoItem.textContent = inputValue; + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.className = 'todo-checkbox'; + newTodoItem.appendChild(checkbox); + newTodoItem.appendChild(document.createTextNode(inputValue)); document.getElementById('todo-list').appendChild(newTodoItem); document.getElementById('todo-input').value = ''; } } -document.getElementById('todo-form').addEventListener('submit', addTodo); \ No newline at end of file +function checkTodo (event) { + if (event.target.className === 'todo-checkbox') { + const listItem = event.target.parentElement; + if (event.target.checked) { + listItem.style.textDecoration = 'line-through'; + listItem.style.color = 'grey'; + } else { + listItem.style.textDecoration = 'none'; + listItem.style.color = 'black'; + } + } +} + +document.getElementById('todo-form').addEventListener('submit', addTodo); +document.getElementById('todo-list').addEventListener('change', checkTodo); \ No newline at end of file From 7ca24687b0d56a59b90640ffd3d66395ca34fd74 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Sun, 15 Oct 2023 19:53:13 +0900 Subject: [PATCH 03/12] =?UTF-8?q?[Feat]=20=EC=88=98=EC=A0=95,=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- style.css | 28 +++++++++++++++++++++++++-- todo.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 77 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index e76290e..7971e90 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

To-Do list

- +