From 018d486f426e63265befabf9c7192d7396ba3032 Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Thu, 22 Aug 2024 20:20:00 +0900 Subject: [PATCH 01/12] test commit --- script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index b0ec50d..347d704 100644 --- a/script.js +++ b/script.js @@ -1 +1,2 @@ -// 다들 화이팅!! ٩( *˙0˙*)۶ \ No newline at end of file +// 다들 화이팅!! ٩( *˙0˙*)۶ +//test commit \ No newline at end of file From 3e813f4f762759d79928dffa7a4100ea750b3963 Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Mon, 26 Aug 2024 00:13:40 +0900 Subject: [PATCH 02/12] =?UTF-8?q?prettierrc=20=EC=B4=88=EA=B8=B0=EC=84=A4?= =?UTF-8?q?=EC=A0=95=ED=8C=8C=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..1dc7164 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true +} \ No newline at end of file From 14c21c73bda36f917be024fe8c270ae45c68e563 Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Mon, 26 Aug 2024 00:33:36 +0900 Subject: [PATCH 03/12] Docs : ToDoList HTML --- index.html | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index d241b1b..d0195b4 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,26 @@ - Vanilla Todo + 📚 TO DO LIST -
+
+
📚 투두리스트
+
+ + +
+
+

🗒️ TO DO (0)

+ +
+
+

💿 DONE (0)

+ +
+
+ - - + \ No newline at end of file From 5aded183337b3a01ccd2e86fd84fb75fd239f523 Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Mon, 26 Aug 2024 22:35:22 +0900 Subject: [PATCH 04/12] =?UTF-8?q?style:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20UI=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 73 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index dd32f0e..2841651 100644 --- a/style.css +++ b/style.css @@ -1 +1,73 @@ -/* 자유롭게 디자인 해 주세요! */ \ No newline at end of file +/* 자유롭게 디자인 해 주세요! */ + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(to right, #d8bfd8, #ffb6c1); +} + +.container { + background: white; + border-radius: 10px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 300px; +} + +header { + font-size: 24px; + margin-bottom: 20px; + text-align: center; +} + +.input-container { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +input[type="text"] { + flex-grow: 1; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 10px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.todo-list-container, .done-list-container { + margin-top: 20px; +} + +ul { + list-style-type: none; +} + +li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid #ccc; +} + +li .delete-btn { + cursor: pointer; + color: red; +} + +h2 { + font-size: 18px; + margin-bottom: 10px; +} + + \ No newline at end of file From 024601442d2780f668383d194b58cc2a52dd3642 Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Mon, 26 Aug 2024 23:52:50 +0900 Subject: [PATCH 05/12] =?UTF-8?q?design=20:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=20UI=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index 2841651..d4d5e5c 100644 --- a/style.css +++ b/style.css @@ -54,10 +54,11 @@ ul { li { display: flex; - justify-content: space-between; - align-items: center; - padding: 10px; - border-bottom: 1px solid #ccc; + justify-content: space-evenly; + align-items: baseline; + padding: 10px; + border-bottom: 1px solid #ccc; + margin-right: 40px; } li .delete-btn { From ab5c57f6f210da4ea41c38a17c1bd3f390cf293a Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Tue, 27 Aug 2024 11:16:08 +0900 Subject: [PATCH 06/12] =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 347d704..9a30baf 100644 --- a/script.js +++ b/script.js @@ -1,2 +1,6 @@ -// 다들 화이팅!! ٩( *˙0˙*)۶ -//test commit \ No newline at end of file + const todoInput = document.querySelector(".input-container input"); + const addButton = document.querySelector(".input-container button"); + const todoList = document.querySelector(".todo-list"); + const todoCount = document.querySelector(".todo-list-container h2"); + + let todoItems = []; \ No newline at end of file From 10074300ed5c7bac02a15fd4fb3db87fd3b8933f Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Tue, 27 Aug 2024 11:19:02 +0900 Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=ED=95=A0=20=EC=9D=BC=20=ED=95=AD?= =?UTF-8?q?=EB=AA=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 9a30baf..38162f0 100644 --- a/script.js +++ b/script.js @@ -3,4 +3,17 @@ const todoList = document.querySelector(".todo-list"); const todoCount = document.querySelector(".todo-list-container h2"); - let todoItems = []; \ No newline at end of file + let todoItems = [];//'추가' 버튼 클릭 시 호출되는 이벤트 리스너를 설정 + addButton.addEventListener("click", () => { + const task = todoInput.value.trim(); + if (task) { + addTodoItem(task); + todoInput.value = ""; + } + }); + + // 새로운 할 일 항목을 배열에 추가 + function addTodoItem(task) { + todoItems.push(task); + renderTodoList(); + } From 59b3e68579080d61b810e9a13efc3907322f6d24 Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Tue, 27 Aug 2024 11:29:55 +0900 Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=ED=95=A0=EC=9D=BC=20=ED=95=AD?= =?UTF-8?q?=EB=AA=A9=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B8=B0=EB=8A=A5=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 55 +++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 43 insertions(+), 12 deletions(-) diff --git a/script.js b/script.js index 38162f0..9b8f260 100644 --- a/script.js +++ b/script.js @@ -1,19 +1,50 @@ - const todoInput = document.querySelector(".input-container input"); - const addButton = document.querySelector(".input-container button"); - const todoList = document.querySelector(".todo-list"); - const todoCount = document.querySelector(".todo-list-container h2"); +const todoInput = document.querySelector(".input-container input"); +const addButton = document.querySelector(".input-container button"); +const todoList = document.querySelector(".todo-list"); +const todoCount = document.querySelector(".todo-list-container h2"); - let todoItems = [];//'추가' 버튼 클릭 시 호출되는 이벤트 리스너를 설정 - addButton.addEventListener("click", () => { +let todoItems = []; + +// '추가' 버튼 클릭 시 호출되는 이벤트 리스너를 설정 +addButton.addEventListener("click", () => { const task = todoInput.value.trim(); if (task) { - addTodoItem(task); - todoInput.value = ""; + addTodoItem(task); + todoInput.value = ""; } - }); +}); - // 새로운 할 일 항목을 배열에 추가 - function addTodoItem(task) { +// 새로운 할 일 항목을 배열에 추가 +function addTodoItem(task) { todoItems.push(task); renderTodoList(); - } +} + +// 지정된 인덱스의 항목을 배열에서 제거 +function removeTodoItem(index) { + // 인덱스에 해당하는 항목을 배열에서 제거 + todoItems.splice(index, 1); + // 업데이트된 리스트를 다시 렌더링 + renderTodoList(); +} + +function renderTodoList() { + // 기존 리스트를 초기화 + todoList.innerHTML = ""; + todoItems.forEach((item, index) => { + const li = document.createElement("li"); + li.textContent = item; + + // 삭제 버튼 생성 + const deleteBtn = document.createElement("span"); + deleteBtn.textContent = "🗑️"; + deleteBtn.classList.add("delete-btn"); + // 클릭 시 항목 삭제 + deleteBtn.addEventListener("click", () => removeTodoItem(index)); + + li.appendChild(deleteBtn); + todoList.appendChild(li); + }); + // 리스트의 항목 수를 업데이트 + todoCount.textContent = `🗒️ TO DO (${todoItems.length})`; +} From 91c678bfb7c0b45ced270db5a412f72ffea95bef Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Tue, 27 Aug 2024 15:27:59 +0900 Subject: [PATCH 09/12] =?UTF-8?q?feat:=20=ED=95=A0=EC=9D=BC=EC=99=84?= =?UTF-8?q?=EB=A3=8C=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 89 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 58 insertions(+), 31 deletions(-) diff --git a/script.js b/script.js index 9b8f260..aa3f995 100644 --- a/script.js +++ b/script.js @@ -1,50 +1,77 @@ const todoInput = document.querySelector(".input-container input"); const addButton = document.querySelector(".input-container button"); const todoList = document.querySelector(".todo-list"); +const doneList = document.querySelector(".done-list"); const todoCount = document.querySelector(".todo-list-container h2"); +const doneCount = document.querySelector(".done-list-container h2"); -let todoItems = []; +let todoItems = []; +let doneItems = []; -// '추가' 버튼 클릭 시 호출되는 이벤트 리스너를 설정 +// 버튼 클릭 시 호출되는 이벤트 리스너를 설정 addButton.addEventListener("click", () => { - const task = todoInput.value.trim(); - if (task) { - addTodoItem(task); - todoInput.value = ""; - } + const task = todoInput.value.trim(); + if (task) { + addTodoItem(task); + todoInput.value = ""; // 입력 필드 초기화 + } }); // 새로운 할 일 항목을 배열에 추가 function addTodoItem(task) { - todoItems.push(task); - renderTodoList(); + todoItems.push(task); + renderTodoList(); // 할 일 목록을 렌더링 } // 지정된 인덱스의 항목을 배열에서 제거 function removeTodoItem(index) { - // 인덱스에 해당하는 항목을 배열에서 제거 - todoItems.splice(index, 1); - // 업데이트된 리스트를 다시 렌더링 - renderTodoList(); + todoItems.splice(index, 1); // 인덱스에 해당하는 항목을 제거 + renderTodoList(); // 업데이트된 할 일 목록을 렌더링 } +// 항목을 완료 목록으로 이동 +function completeTodoItem(index) { + const completedTask = todoItems.splice(index, 1); // 완료된 항목을 todoItems에서 제거 + doneItems.push(completedTask[0]); // 완료된 항목을 doneItems에 추가 + renderTodoList(); // 할 일 목록을 렌더링 + renderDoneList(); // 완료된 항목 목록을 렌더링 +} + +// 할 일 목록을 화면에 렌더링 function renderTodoList() { - // 기존 리스트를 초기화 - todoList.innerHTML = ""; - todoItems.forEach((item, index) => { - const li = document.createElement("li"); - li.textContent = item; - - // 삭제 버튼 생성 - const deleteBtn = document.createElement("span"); - deleteBtn.textContent = "🗑️"; - deleteBtn.classList.add("delete-btn"); - // 클릭 시 항목 삭제 - deleteBtn.addEventListener("click", () => removeTodoItem(index)); - - li.appendChild(deleteBtn); - todoList.appendChild(li); - }); - // 리스트의 항목 수를 업데이트 - todoCount.textContent = `🗒️ TO DO (${todoItems.length})`; + todoList.innerHTML = ""; // 기존 목록 초기화 + todoItems.forEach((item, index) => { + const li = document.createElement("li"); + li.textContent = item; + + // 삭제 버튼 생성 + const deleteBtn = document.createElement("span"); + deleteBtn.textContent = "🗑️"; + deleteBtn.classList.add("delete-btn"); + deleteBtn.addEventListener("click", () => removeTodoItem(index)); + + // 완료 버튼 생성 + const completeBtn = document.createElement("span"); + completeBtn.textContent = "✔️"; + completeBtn.classList.add("complete-btn"); + completeBtn.addEventListener("click", () => completeTodoItem(index)); + + li.appendChild(completeBtn); + li.appendChild(deleteBtn); + todoList.appendChild(li); + }); + // 할 일 항목 수를 업데이트 + todoCount.textContent = `🗒️ TO DO (${todoItems.length})`; +} + +// 완료된 항목 목록을 화면에 렌더링 +function renderDoneList() { + doneList.innerHTML = ""; // 기존 목록 초기화 + doneItems.forEach(item => { + const li = document.createElement("li"); + li.textContent = item; + doneList.appendChild(li); + }); + // 완료된 항목 수를 업데이트 + doneCount.textContent = `💿 DONE (${doneItems.length})`; } From dc4600b1b1269cfd06378f36b4da32d87a4a29ff Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Wed, 28 Aug 2024 16:54:38 +0900 Subject: [PATCH 10/12] =?UTF-8?q?feat:=20=EC=99=84=EB=A3=8C=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index aa3f995..8fd8d86 100644 --- a/script.js +++ b/script.js @@ -8,7 +8,7 @@ const doneCount = document.querySelector(".done-list-container h2"); let todoItems = []; let doneItems = []; -// 버튼 클릭 시 호출되는 이벤트 리스너를 설정 +// 버튼 클릭 시 호출되는 이벤트 리스너를 설정 addButton.addEventListener("click", () => { const task = todoInput.value.trim(); if (task) { @@ -37,6 +37,12 @@ function completeTodoItem(index) { renderDoneList(); // 완료된 항목 목록을 렌더링 } +// done 목록에서 항목을 제거 +function removeDoneItem(index) { + doneItems.splice(index, 1); // 인덱스에 해당하는 항목을 제거 + renderDoneList(); // 업데이트된 완료된 항목 목록을 렌더링 +} + // 할 일 목록을 화면에 렌더링 function renderTodoList() { todoList.innerHTML = ""; // 기존 목록 초기화 @@ -67,9 +73,17 @@ function renderTodoList() { // 완료된 항목 목록을 화면에 렌더링 function renderDoneList() { doneList.innerHTML = ""; // 기존 목록 초기화 - doneItems.forEach(item => { + doneItems.forEach((item, index) => { const li = document.createElement("li"); li.textContent = item; + + // 삭제 버튼 생성 + const deleteBtn = document.createElement("span"); + deleteBtn.textContent = "🗑️"; + deleteBtn.classList.add("delete-btn"); + deleteBtn.addEventListener("click", () => removeDoneItem(index)); + + li.appendChild(deleteBtn); doneList.appendChild(li); }); // 완료된 항목 수를 업데이트 From 1639bc92b1e33702d9e1c1f4cceffb37e38c100f Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Thu, 29 Aug 2024 15:26:16 +0900 Subject: [PATCH 11/12] =?UTF-8?q?design:=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=ED=95=AD=EB=AA=A9=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index d4d5e5c..de9ccf5 100644 --- a/style.css +++ b/style.css @@ -71,4 +71,14 @@ h2 { margin-bottom: 10px; } - \ No newline at end of file + /* 완료된 항목 텍스트에 대한 스타일 */ +.done-item-text { + color: gray; + text-decoration: line-through; +} + +/* 삭제 버튼의 스타일 */ +.delete-btn { + color: red; + cursor: pointer; +} \ No newline at end of file From 3bddad81ad2eab58c1ab7f471f8815e373b1f928 Mon Sep 17 00:00:00 2001 From: jissssu <113964353+jissssu@users.noreply.github.com> Date: Thu, 29 Aug 2024 15:35:14 +0900 Subject: [PATCH 12/12] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=8F=20=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 8fd8d86..1ff8a8d 100644 --- a/script.js +++ b/script.js @@ -5,8 +5,8 @@ const doneList = document.querySelector(".done-list"); const todoCount = document.querySelector(".todo-list-container h2"); const doneCount = document.querySelector(".done-list-container h2"); -let todoItems = []; -let doneItems = []; +const todoItems = []; +const doneItems = []; // 버튼 클릭 시 호출되는 이벤트 리스너를 설정 addButton.addEventListener("click", () => { @@ -75,7 +75,9 @@ function renderDoneList() { doneList.innerHTML = ""; // 기존 목록 초기화 doneItems.forEach((item, index) => { const li = document.createElement("li"); - li.textContent = item; + const itemText = document.createElement("span"); + itemText.textContent = item; + itemText.classList.add("done-item-text"); // 삭제 버튼 생성 const deleteBtn = document.createElement("span"); @@ -83,9 +85,12 @@ function renderDoneList() { deleteBtn.classList.add("delete-btn"); deleteBtn.addEventListener("click", () => removeDoneItem(index)); - li.appendChild(deleteBtn); - doneList.appendChild(li); + li.appendChild(itemText); + li.appendChild(deleteBtn); + + doneList.appendChild(li); }); // 완료된 항목 수를 업데이트 doneCount.textContent = `💿 DONE (${doneItems.length})`; } +