From 68f94cde00688bf68f128e0636cf90a27be7436b Mon Sep 17 00:00:00 2001 From: dragunshin Date: Sat, 13 Sep 2025 03:58:13 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..5378965 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + Vanilla Todo + + + + +
+
+

To Do List

+

+

+

0 tasks

+

+ +
+
+ + +
+ + + +
+ +
+ +
+ + + \ No newline at end of file From b4c355305edbe8a3e61a2af2e126fce7ae0f8c99 Mon Sep 17 00:00:00 2001 From: dragunshin Date: Sat, 13 Sep 2025 04:49:40 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=ED=95=A0=EC=9D=BC=20=EB=93=B1=EB=A1=9D=20?= =?UTF-8?q?=EB=B0=8F=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 14 +++++------ script.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+), 7 deletions(-) create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html index 5378965..99dc6fa 100644 --- a/index.html +++ b/index.html @@ -12,23 +12,23 @@

To Do List



-

0 tasks

+

0 tasks



- + -
- -
-
-
    +
    +
      diff --git a/script.js b/script.js new file mode 100644 index 0000000..ae2ae1a --- /dev/null +++ b/script.js @@ -0,0 +1,65 @@ +const dateElement = document.getElementById('date'); +const taskInput = document.getElementById('taskInput'); +const addTaskButton = document.getElementById('addTaskButton'); +const taskList = document.getElementById('taskList'); +const currentTask = document.getElementById('currentTask'); +const userDate = document.getElementById('userDate'); + +const today = new Date(); +dateElement.textContent = today.toDateString(); + +let tasks = []; + +function updateTaskCount() { + currentTask.textContent = tasks.length; +} + +function addTask() { + const taskText = taskInput.value.trim(); + + if (taskText === '') { + alert('Please enter a task.'); + return; + } + + const li = document.createElement('li'); + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + + const span = document.createElement('span'); + span.textContent = taskText; + + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete'; + + li.appendChild(checkbox); + li.appendChild(span); + li.appendChild(deleteButton); + taskList.appendChild(li); + + taskInput.value = ''; + updateTaskCount(); +} + +addTaskButton.addEventListener('click', addTask); +taskInput.addEventListener('keypress', function(event) { + if (event.key === 'Enter') { + addTask(); + } +}); + +taskList.addEventListener('click', function(event) { + const targetElement = event.target; + + if(targetElement.type === 'checkbox') { + const li = targetElement.closest('li'); + li.classList.toggle('completed'); + updateTaskCount(); + } + if(targetElement.tagName === 'BUTTON') { + const li = targetElement.closest('li'); + li.remove(); + updateTaskCount(); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6dbf7ed --- /dev/null +++ b/style.css @@ -0,0 +1,69 @@ +* { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #f4f4f4; + display: grid; + justify-content: center; + padding: 50px; +} + +header { + display: flex; + flex-direction: column; + text-align: center; + margin-bottom: 40px; + color:brown; +} + +div { + display: flex; + gap: 10px; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width: 400px; + +} +input[type="text"] { + padding: 10px; + width: 300px; + border: 1px solid #ccc; + border-radius: 5px; +} + +input[type="date"] { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} +button { + padding: 5px; + background-color: brown; + color: white; + border: none; + width: 50px; + height: 30px; + border-radius: 5px; + cursor: pointer; +} +button:hover { + background-color: darkred; +} +ul { + list-style-type: none; + width: 100%; +} + +li { + margin-bottom: 10px; + padding: 20px; + border-radius: 5px; + display: flex; + justify-content: space-between; + align-items: center; +} \ No newline at end of file From 98ccfcda2cceca37a3201ce1dec04c648678a6e1 Mon Sep 17 00:00:00 2001 From: dragunshin Date: Sat, 13 Sep 2025 04:53:07 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=ED=95=A0=EC=9D=BC=20=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 2 -- style.css | 5 +++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index ae2ae1a..176d626 100644 --- a/script.js +++ b/script.js @@ -5,8 +5,6 @@ const taskList = document.getElementById('taskList'); const currentTask = document.getElementById('currentTask'); const userDate = document.getElementById('userDate'); -const today = new Date(); -dateElement.textContent = today.toDateString(); let tasks = []; diff --git a/style.css b/style.css index 6dbf7ed..fae5ebe 100644 --- a/style.css +++ b/style.css @@ -66,4 +66,9 @@ li { display: flex; justify-content: space-between; align-items: center; +} + +li.completed span { + text-decoration: line-through; + color: gray; } \ No newline at end of file From beda6bdb9d0632d76e92aeff0867e403236994da Mon Sep 17 00:00:00 2001 From: dragunshin Date: Sat, 13 Sep 2025 18:16:46 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=EC=9A=94=EC=9D=BC=20=EB=B3=84=20todo?= =?UTF-8?q?=EA=B0=9C=EC=88=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 89 +++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 64 insertions(+), 25 deletions(-) diff --git a/script.js b/script.js index 176d626..97939c5 100644 --- a/script.js +++ b/script.js @@ -5,39 +5,73 @@ const taskList = document.getElementById('taskList'); const currentTask = document.getElementById('currentTask'); const userDate = document.getElementById('userDate'); +let todosByDate = JSON.parse(localStorage.getItem('todos') || '{}'); -let tasks = []; +function renderTasks() { + const selectedDate = userDate.value; + + taskList.innerHTML = ""; + + const tasksForSelectedDate = todosByDate[selectedDate] || []; + + tasksForSelectedDate.forEach((task, index) => { + const li = document.createElement('li'); + + if(task.completed){ + li.classList.add('completed'); + } + + li.dataset.index = index; + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.checked = task.completed; + + const span = document.createElement('span'); + span.textContent = task.text; + + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete'; + + li.appendChild(checkbox); + li.appendChild(span); + li.appendChild(deleteButton); + taskList.appendChild(li); + }); + + updateTaskCount(); +} function updateTaskCount() { - currentTask.textContent = tasks.length; + const selectedDate = userDate.value; + const tasksSelectedDate = todosByDate[selectedDate] || []; + + const uncompletedTasks = tasksSelectedDate.filter(task => !task.completed).length; + currentTask.textContent = uncompletedTasks; } function addTask() { const taskText = taskInput.value.trim(); + const selectedDate = userDate.value; if (taskText === '') { alert('Please enter a task.'); return; } + // 날짜의 배열이 없으면 빈 배열 생성 + if (!todosByDate[selectedDate]) { + todosByDate[selectedDate] = []; + } + todosByDate[selectedDate].push({text: taskText, completed: false}); - const li = document.createElement('li'); - - const checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - - const span = document.createElement('span'); - span.textContent = taskText; + taskInput.value = ""; - const deleteButton = document.createElement('button'); - deleteButton.textContent = 'Delete'; - - li.appendChild(checkbox); - li.appendChild(span); - li.appendChild(deleteButton); - taskList.appendChild(li); + saveData(); + renderTasks(); +} - taskInput.value = ''; - updateTaskCount(); +function saveData() { + localStorage.setItem('todos', JSON.stringify(todosByDate)); } addTaskButton.addEventListener('click', addTask); @@ -47,17 +81,22 @@ taskInput.addEventListener('keypress', function(event) { } }); +userDate.addEventListener('change', renderTasks); + taskList.addEventListener('click', function(event) { const targetElement = event.target; + const li = targetElement.closest('li'); + + const selectedDate = userDate.value; + const taskIndex = li.dataset.index; if(targetElement.type === 'checkbox') { - const li = targetElement.closest('li'); - li.classList.toggle('completed'); - updateTaskCount(); + todosByDate[selectedDate][taskIndex].completed = !todosByDate[selectedDate][taskIndex].completed; } if(targetElement.tagName === 'BUTTON') { - const li = targetElement.closest('li'); - li.remove(); - updateTaskCount(); + todosByDate[selectedDate].splice(taskIndex,1); } -}); \ No newline at end of file + + saveData(); + renderTasks(); +}); From 8e03077f66a298b8007fd650fa2d7dcca19037e3 Mon Sep 17 00:00:00 2001 From: dragunshin Date: Sat, 13 Sep 2025 20:04:30 +0900 Subject: [PATCH 5/7] vercel --- vercel.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..4179678 --- /dev/null +++ b/vercel.json @@ -0,0 +1,5 @@ +{ + "rewrites": [ + {"source": "/(.*)", "destination": "/"} + ] +} \ No newline at end of file From 8be3c0571ea13939f97e67dfb9358cd8d3d89db2 Mon Sep 17 00:00:00 2001 From: dragunshin Date: Mon, 15 Sep 2025 12:43:25 +0900 Subject: [PATCH 6/7] update code --- index.html | 1 - script.js | 4 ++++ vercel.json | 5 ----- 3 files changed, 4 insertions(+), 6 deletions(-) delete mode 100644 vercel.json diff --git a/index.html b/index.html index 99dc6fa..8d8fbe9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,6 @@ Vanilla Todo -
      diff --git a/script.js b/script.js index 97939c5..e27a77f 100644 --- a/script.js +++ b/script.js @@ -54,6 +54,10 @@ function addTask() { const taskText = taskInput.value.trim(); const selectedDate = userDate.value; + if (!selectedDate) { + alert('Select a date.'); + return; + } if (taskText === '') { alert('Please enter a task.'); return; diff --git a/vercel.json b/vercel.json deleted file mode 100644 index 4179678..0000000 --- a/vercel.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "rewrites": [ - {"source": "/(.*)", "destination": "/"} - ] -} \ No newline at end of file From 046edce1c85a89cde991fe61e457c17d7178d987 Mon Sep 17 00:00:00 2001 From: dragunshin Date: Mon, 15 Sep 2025 13:24:20 +0900 Subject: [PATCH 7/7] re-add vercel.json --- vercel.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..4179678 --- /dev/null +++ b/vercel.json @@ -0,0 +1,5 @@ +{ + "rewrites": [ + {"source": "/(.*)", "destination": "/"} + ] +} \ No newline at end of file