From d4a0cc2728005de3e662ffb40de6b3c80e01fb6a Mon Sep 17 00:00:00 2001 From: Yoouyeon Date: Mon, 27 Mar 2023 19:45:15 +0900 Subject: [PATCH 01/15] =?UTF-8?q?[Feat]=20todo=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=EA=B8=B0=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 | 19 +++++++++++++++++++ todo.js | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 index.html create mode 100644 todo.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..254d6e3 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + + + TODO + + +
+ +
+ + + + \ No newline at end of file diff --git a/todo.js b/todo.js new file mode 100644 index 0000000..9c38a63 --- /dev/null +++ b/todo.js @@ -0,0 +1,40 @@ +const todoForm = document.getElementById('todo-form'); +const todoInput = document.getElementById('todo-input'); +const todoList = document.getElementById('todo-list'); + +// Initialize + +const TODO_KEY = 'todoData' +let todoData = JSON.parse(localStorage.getItem(TODO_KEY)) || []; +todoData.map(printTodo); + +// Event Listeners + +todoForm.addEventListener('submit', handleTodoSubmit); + +// Functions + +function handleTodoSubmit(event) { + event.preventDefault(); // 새로고침 방지 + const newTodo = { + id: Date.now(), // 현재 시간의 밀리초를 id로 사용 + text: todoInput.value, + } + todoInput.value = ''; // 입력창 초기화 + printTodo(newTodo); + saveTodo(newTodo); +} + +function printTodo (newTodo) { + const li = document.createElement('li'); + const span = document.createElement('span'); + li.id = newTodo.id; + span.innerText = newTodo.text; + li.appendChild(span); + todoList.appendChild(li); +} + +function saveTodo (newTodo) { + todoData.push(newTodo); + localStorage.setItem(TODO_KEY, JSON.stringify(todoData)); +} \ No newline at end of file From 8da5f25921e23f8fb57e0b0ccd5586935a4cfc52 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Tue, 28 Mar 2023 12:46:21 +0900 Subject: [PATCH 02/15] =?UTF-8?q?[Feat]=20todo=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=EA=B8=B0=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 --- todo.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/todo.js b/todo.js index 9c38a63..b3c2f55 100644 --- a/todo.js +++ b/todo.js @@ -12,7 +12,7 @@ todoData.map(printTodo); todoForm.addEventListener('submit', handleTodoSubmit); -// Functions +// Event Handlers function handleTodoSubmit(event) { event.preventDefault(); // 새로고침 방지 @@ -22,19 +22,37 @@ function handleTodoSubmit(event) { } todoInput.value = ''; // 입력창 초기화 printTodo(newTodo); - saveTodo(newTodo); + addTodo(newTodo); +} + +function handleTodoDelete(event) { + const targetId = event.target.parentElement.id; + const li = event.target.parentElement; // 삭제할 li + li.remove(); // 화면에서 삭제하기 + todoData = todoData.filter((todo) => { return (todo.id !== parseInt(targetId)); }); + saveTodo(); } +// Functions + function printTodo (newTodo) { const li = document.createElement('li'); const span = document.createElement('span'); + const button = document.createElement('button'); + button.addEventListener('click', handleTodoDelete); li.id = newTodo.id; span.innerText = newTodo.text; + button.innerText = '삭제'; li.appendChild(span); + li.appendChild(button); todoList.appendChild(li); } -function saveTodo (newTodo) { +function addTodo (newTodo) { todoData.push(newTodo); + saveTodo(); +} + +function saveTodo () { localStorage.setItem(TODO_KEY, JSON.stringify(todoData)); } \ No newline at end of file From 66fb50001aeeb35c574a2d8da7f868aef0aff5ed Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Tue, 28 Mar 2023 13:36:24 +0900 Subject: [PATCH 03/15] =?UTF-8?q?[Feat]=20todo=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EA=B8=B0=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 --- todo.js | 63 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 51 insertions(+), 12 deletions(-) diff --git a/todo.js b/todo.js index b3c2f55..13e32b1 100644 --- a/todo.js +++ b/todo.js @@ -8,8 +8,6 @@ const TODO_KEY = 'todoData' let todoData = JSON.parse(localStorage.getItem(TODO_KEY)) || []; todoData.map(printTodo); -// Event Listeners - todoForm.addEventListener('submit', handleTodoSubmit); // Event Handlers @@ -26,10 +24,44 @@ function handleTodoSubmit(event) { } function handleTodoDelete(event) { - const targetId = event.target.parentElement.id; + const targetId = parseInt(event.target.parentElement.id); const li = event.target.parentElement; // 삭제할 li - li.remove(); // 화면에서 삭제하기 - todoData = todoData.filter((todo) => { return (todo.id !== parseInt(targetId)); }); + li.remove(); + todoData = todoData.filter((todo) => { return (todo.id !== targetId); }); + saveTodo(); +} + +function handleTodoUpdate(event) { + const li = event.target.parentElement; // 수정할 Todo + const div = li.querySelector('div'); + div.innerText = ''; // div 안의 내용 삭제 + const updateButton = li.querySelector('.update'); + updateButton.disabled = true; // 수정 중 수정 이벤트 발생 차단 + const form = document.createElement('form'); + form.addEventListener('submit', handleChangedTodoSubmit); + const updateInput = document.createElement('input'); + updateInput.type = 'text'; + updateInput.value = div.innerText; + div.appendChild(form); + form.appendChild(updateInput); +} + +function handleChangedTodoSubmit(event) { + event.preventDefault(); + const form = event.target; + const todoId = parseInt(form.parentElement.parentElement.id); // 수정할 Todo의 id + const div = form.parentElement; // Form 부모 div + const updateInput = form.querySelector('input').value; // 수정할 내용 + const updateButton = div.parentElement.querySelector('.update'); + updateButton.disabled = false; + div.innerText = updateInput; + form.remove(); + todoData = todoData.map((todo) => { + if (todo.id === todoId) { + todo.text = updateInput; + } + return todo; + }); // 수정한 내용 반영 saveTodo(); } @@ -37,14 +69,21 @@ function handleTodoDelete(event) { function printTodo (newTodo) { const li = document.createElement('li'); - const span = document.createElement('span'); - const button = document.createElement('button'); - button.addEventListener('click', handleTodoDelete); li.id = newTodo.id; - span.innerText = newTodo.text; - button.innerText = '삭제'; - li.appendChild(span); - li.appendChild(button); + const div = document.createElement('div'); + const updateButton = document.createElement('button'); + updateButton.addEventListener('click', handleTodoUpdate); + updateButton.className = 'update'; + updateButton.innerText = '수정'; + const deleteButton = document.createElement('button'); + deleteButton.addEventListener('click', handleTodoDelete); + deleteButton.className = 'delete'; + deleteButton.innerText = '삭제'; + div.innerText = newTodo.text; + + li.appendChild(div); + li.appendChild(updateButton); + li.appendChild(deleteButton); todoList.appendChild(li); } From 294a7e847f9f295d26d335dc5e359b54371abb0c Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Tue, 28 Mar 2023 14:51:07 +0900 Subject: [PATCH 04/15] =?UTF-8?q?[Fix]=20=EA=B8=B0=EC=A1=B4=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=88=98=EC=A0=95=20input=EC=97=90=20=EC=95=88?= =?UTF-8?q?=EB=93=A4=EC=96=B4=EA=B0=80=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- todo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/todo.js b/todo.js index 13e32b1..c685c04 100644 --- a/todo.js +++ b/todo.js @@ -34,7 +34,6 @@ function handleTodoDelete(event) { function handleTodoUpdate(event) { const li = event.target.parentElement; // 수정할 Todo const div = li.querySelector('div'); - div.innerText = ''; // div 안의 내용 삭제 const updateButton = li.querySelector('.update'); updateButton.disabled = true; // 수정 중 수정 이벤트 발생 차단 const form = document.createElement('form'); @@ -42,6 +41,7 @@ function handleTodoUpdate(event) { const updateInput = document.createElement('input'); updateInput.type = 'text'; updateInput.value = div.innerText; + div.innerText = ''; // div 안의 내용 삭제 div.appendChild(form); form.appendChild(updateInput); } From 59d4c9c51f881708de9cf6a899a2cf6a8e0397ce Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Tue, 28 Mar 2023 16:43:25 +0900 Subject: [PATCH 05/15] =?UTF-8?q?[Style]=20=EA=B8=B0=EB=B3=B8=20css=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 17 +++++---- styles.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 254d6e3..164bb3e 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,19 @@ - + TODO -
- -
-
    - -
+
+
+ +
+
+
    + +
+
\ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ad60ad3 --- /dev/null +++ b/styles.css @@ -0,0 +1,105 @@ +html { + height: 100vh; +} +body { + /* 객체의 노출여부와 표현방식 */ + display: flex; + /* 크기와 여백 */ + height: 100%; + margin: 0; + /* 윤곽과 배경 */ + background: linear-gradient(45deg, #6190E8, #A7BFE8); + /* 내용 */ + justify-content: center; + align-items: center; +} + +#todo-wrapper { + /* 객체의 노출여부와 표현방식 */ + display: flex; + flex-direction: column; + /* 크기와 여백 */ + width: 500px; + height: 550px; + padding: 30px; + /* 윤곽과 배경 */ + background: #F5F9FC; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); + /* 글자와 정렬 */ + color: #333333; +} + +#todo-wrapper hr { + /* 크기와 여백 */ + width: 100%; + height: 2px; + margin: 20px 0; + /* 윤곽과 배경 */ + border: 0; + background-color: #FFD24C; +} + +#todo-form { + /* 크기와 여백 */ + width: 100%; +} + +#todo-form input { + /* 크기와 여백 */ + height: 2rem; + width: 100%; + padding: 0 7px; + box-sizing: border-box; + /* 윤곽과 배경 */ + border: 1.5px solid #92B4EC; + border-radius: 10px; + outline: none; +} + +#todo-list { + /* 객체의 노출여부와 표현방식 */ + flex: 1; + /* 크기와 여백 */ + width: 100%; + height: 100%; + padding: 0; + margin: 0; + /* 리스트 스타일 */ + list-style: none; + + overflow: auto; +} + +#todo-list li { + /* 크기와 여백 */ + height: fit-content; + padding: 10px; + margin-bottom: 10px; + /* 윤곽과 배경 */ + border: 1.5px solid #6190E8; + border-radius: 10px; + background-color: #FFFFFF; +} + +/* #todo-list li div { + +} */ + +#todo-list li form { + +} + +#todo-list li button { + /* 윤곽과 배경 */ + border: none; + background: none; + /* 글자와 정렬 */ + color: #92B4EC; + text-align: right; +} + +#todo-list li button:hover { + color: #6190E8; + cursor: pointer +} \ No newline at end of file From 0bde221a899ca90234807e2e2e25aec48ff3b66c Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Tue, 28 Mar 2023 17:10:32 +0900 Subject: [PATCH 06/15] =?UTF-8?q?[Style]=20=EC=88=98=EC=A0=95=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20css=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/styles.css b/styles.css index ad60ad3..b294e02 100644 --- a/styles.css +++ b/styles.css @@ -73,6 +73,7 @@ body { #todo-list li { /* 크기와 여백 */ + display: flex; height: fit-content; padding: 10px; margin-bottom: 10px; @@ -82,12 +83,22 @@ body { background-color: #FFFFFF; } -/* #todo-list li div { - -} */ - -#todo-list li form { +#todo-list li div { + flex: 1; + padding: 0 10px; + text-align: left; + word-break: break-all; + word-wrap: break-word; +} +#todo-list li form input { + height: 2rem; + width: 100%; + padding: 0 7px; + box-sizing: border-box; + border: 1.5px solid #92B4EC; + border-radius: 10px; + outline: none; } #todo-list li button { From f16f9da4063f3906bf2fdb860272f046793c180f Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Tue, 28 Mar 2023 17:12:52 +0900 Subject: [PATCH 07/15] =?UTF-8?q?[Chore]=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 21 --------------------- todo.js | 4 ++-- 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/styles.css b/styles.css index b294e02..09c7b54 100644 --- a/styles.css +++ b/styles.css @@ -2,82 +2,63 @@ html { height: 100vh; } body { - /* 객체의 노출여부와 표현방식 */ display: flex; - /* 크기와 여백 */ height: 100%; margin: 0; - /* 윤곽과 배경 */ background: linear-gradient(45deg, #6190E8, #A7BFE8); - /* 내용 */ justify-content: center; align-items: center; } #todo-wrapper { - /* 객체의 노출여부와 표현방식 */ display: flex; flex-direction: column; - /* 크기와 여백 */ width: 500px; height: 550px; padding: 30px; - /* 윤곽과 배경 */ background: #F5F9FC; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); - /* 글자와 정렬 */ color: #333333; } #todo-wrapper hr { - /* 크기와 여백 */ width: 100%; height: 2px; margin: 20px 0; - /* 윤곽과 배경 */ border: 0; background-color: #FFD24C; } #todo-form { - /* 크기와 여백 */ width: 100%; } #todo-form input { - /* 크기와 여백 */ height: 2rem; width: 100%; padding: 0 7px; box-sizing: border-box; - /* 윤곽과 배경 */ border: 1.5px solid #92B4EC; border-radius: 10px; outline: none; } #todo-list { - /* 객체의 노출여부와 표현방식 */ flex: 1; - /* 크기와 여백 */ width: 100%; height: 100%; padding: 0; margin: 0; - /* 리스트 스타일 */ list-style: none; - overflow: auto; } #todo-list li { - /* 크기와 여백 */ display: flex; height: fit-content; padding: 10px; margin-bottom: 10px; - /* 윤곽과 배경 */ border: 1.5px solid #6190E8; border-radius: 10px; background-color: #FFFFFF; @@ -102,10 +83,8 @@ body { } #todo-list li button { - /* 윤곽과 배경 */ border: none; background: none; - /* 글자와 정렬 */ color: #92B4EC; text-align: right; } diff --git a/todo.js b/todo.js index c685c04..c2be0a6 100644 --- a/todo.js +++ b/todo.js @@ -18,7 +18,7 @@ function handleTodoSubmit(event) { id: Date.now(), // 현재 시간의 밀리초를 id로 사용 text: todoInput.value, } - todoInput.value = ''; // 입력창 초기화 + todoInput.value = ''; printTodo(newTodo); addTodo(newTodo); } @@ -41,7 +41,7 @@ function handleTodoUpdate(event) { const updateInput = document.createElement('input'); updateInput.type = 'text'; updateInput.value = div.innerText; - div.innerText = ''; // div 안의 내용 삭제 + div.innerText = ''; div.appendChild(form); form.appendChild(updateInput); } From 9e4705e728fc1f4345f0159bee753bb533808cd4 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Tue, 28 Mar 2023 17:58:15 +0900 Subject: [PATCH 08/15] =?UTF-8?q?[Feat]=20todo=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EC=B7=A8=EC=86=8C=20=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 --- todo.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/todo.js b/todo.js index c2be0a6..1d0b76c 100644 --- a/todo.js +++ b/todo.js @@ -35,7 +35,9 @@ function handleTodoUpdate(event) { const li = event.target.parentElement; // 수정할 Todo const div = li.querySelector('div'); const updateButton = li.querySelector('.update'); - updateButton.disabled = true; // 수정 중 수정 이벤트 발생 차단 + updateButton.innerText = '취소'; + updateButton.removeEventListener('click', handleTodoUpdate); + updateButton.addEventListener('click', handleTodoUpdateCancel); const form = document.createElement('form'); form.addEventListener('submit', handleChangedTodoSubmit); const updateInput = document.createElement('input'); @@ -53,7 +55,9 @@ function handleChangedTodoSubmit(event) { const div = form.parentElement; // Form 부모 div const updateInput = form.querySelector('input').value; // 수정할 내용 const updateButton = div.parentElement.querySelector('.update'); - updateButton.disabled = false; + updateButton.innerText = '수정'; + updateButton.removeEventListener('click', handleTodoUpdateCancel); + updateButton.addEventListener('click', handleTodoUpdate); div.innerText = updateInput; form.remove(); todoData = todoData.map((todo) => { @@ -65,6 +69,20 @@ function handleChangedTodoSubmit(event) { saveTodo(); } +function handleTodoUpdateCancel(event) { + const li = event.target.parentElement; // 수정할 Todo + const id = parseInt(li.id); + const div = li.querySelector('div'); + const form = div.querySelector('form'); + form.remove(); + const updateButton = li.querySelector('.update'); + updateButton.innerText = '수정'; + updateButton.removeEventListener('click', handleTodoUpdateCancel); + updateButton.addEventListener('click', handleTodoUpdate); + const oldTodo = todoData.find((todo) => todo.id === id); + div.innerText = oldTodo.text; +} + // Functions function printTodo (newTodo) { From 38126e080339a324bb1d826e18ce1c4e88556816 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 29 Mar 2023 13:35:02 +0900 Subject: [PATCH 09/15] =?UTF-8?q?[Style]=20=EC=A0=9C=EB=AA=A9=EA=B3=BC=20?= =?UTF-8?q?=ED=8F=B0=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 +++++- styles.css | 20 +++++++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 164bb3e..1b55654 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,14 @@ + + + - TODO + Simple ToDo +

SIMPLE TODO LIST

diff --git a/styles.css b/styles.css index 09c7b54..1fde474 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,13 @@ +* { + font-family: 'Nanum Gothic', sans-serif; +} + html { height: 100vh; } body { display: flex; + flex-direction: column; height: 100%; margin: 0; background: linear-gradient(45deg, #6190E8, #A7BFE8); @@ -10,11 +15,18 @@ body { align-items: center; } +h1 { + font-family: 'Lilita One', sans-serif, cursive; + font-size: 3rem; + color: #F5F9FC; + margin: 0 0 10px 0; +} + #todo-wrapper { display: flex; flex-direction: column; width: 500px; - height: 550px; + height: 400px; padding: 30px; background: #F5F9FC; border-radius: 10px; @@ -22,6 +34,12 @@ body { color: #333333; } +@media (max-height: 500px) { + #todo-wrapper { + height: 300px; + } +} + #todo-wrapper hr { width: 100%; height: 2px; From 4fa200e36bd1d76bea9468c956dfa88109786388 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 29 Mar 2023 14:20:30 +0900 Subject: [PATCH 10/15] =?UTF-8?q?[Feat]=20todo=20=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?=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 --- styles.css | 18 ++++++++++++++---- todo.js | 18 ++++++++++++++++++ 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 1fde474..fa7226a 100644 --- a/styles.css +++ b/styles.css @@ -82,7 +82,7 @@ h1 { background-color: #FFFFFF; } -#todo-list li div { +#todo-list li > div { flex: 1; padding: 0 10px; text-align: left; @@ -90,7 +90,17 @@ h1 { word-wrap: break-word; } -#todo-list li form input { +#todo-list li.completed { + border: 1.5px solid #FFD24C; + background-color: #F5F9FC; +} + +#todo-list li.completed > div { + text-decoration: line-through; + color: #92B4EC; +} + +#todo-list li > form > input { height: 2rem; width: 100%; padding: 0 7px; @@ -100,14 +110,14 @@ h1 { outline: none; } -#todo-list li button { +#todo-list li > button { border: none; background: none; color: #92B4EC; text-align: right; } -#todo-list li button:hover { +#todo-list li > button:hover { color: #6190E8; cursor: pointer } \ No newline at end of file diff --git a/todo.js b/todo.js index 1d0b76c..97e6aa0 100644 --- a/todo.js +++ b/todo.js @@ -17,6 +17,7 @@ function handleTodoSubmit(event) { const newTodo = { id: Date.now(), // 현재 시간의 밀리초를 id로 사용 text: todoInput.value, + completed: false, } todoInput.value = ''; printTodo(newTodo); @@ -83,12 +84,29 @@ function handleTodoUpdateCancel(event) { div.innerText = oldTodo.text; } +function handleTodoClick(event) { + const li = event.target.parentElement; + const id = parseInt(li.id); + let completed = true; + todoData.map((todo) => { + if (todo.id === id) { + todo.completed = todo.completed === true ? false : true; + completed = todo.completed; + } + return todo; + }); + li.className = completed ? 'completed' : 'not-completed'; + saveTodo(); +} + // Functions function printTodo (newTodo) { const li = document.createElement('li'); li.id = newTodo.id; + li.className = newTodo.completed === true ? 'completed' : 'not-completed'; const div = document.createElement('div'); + div.addEventListener('click', handleTodoClick); const updateButton = document.createElement('button'); updateButton.addEventListener('click', handleTodoUpdate); updateButton.className = 'update'; From f556c944ba3085166b7fec658243319b77db950d Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 29 Mar 2023 14:31:15 +0900 Subject: [PATCH 11/15] =?UTF-8?q?[Fix]=20=EC=88=98=EC=A0=95=20=EC=8B=9C=20?= =?UTF-8?q?Input=20=ED=83=9C=EA=B7=B8=20CSS=20=EB=88=84=EB=9D=BD=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index fa7226a..ffb7efb 100644 --- a/styles.css +++ b/styles.css @@ -100,7 +100,7 @@ h1 { color: #92B4EC; } -#todo-list li > form > input { +#todo-list li form > input { height: 2rem; width: 100%; padding: 0 7px; From d9f329c3248f77f8c2d818328f3150e473bb1a25 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 29 Mar 2023 15:45:35 +0900 Subject: [PATCH 12/15] =?UTF-8?q?[Docs]=20README=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 3125882..e204e81 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,25 @@ -# 42gg 프론트엔드 온보딩 1단계 +# 42gg 프론트엔드 온보딩 1단계 -## 공통 조건 +📝 ToDo List 만들기 -- 온보딩 프로젝트는 개인 계정으로 fork하여 진행하고 PR로 제출합니다. -- git / github / code 컨벤션은 42gg notion에 있는 자료를 적극 반영합니다. -- 기본 기능 외 추가 기능, 디자인 구현은 자유입니다. -- 최종 제출품에는 README 작성이 되있어야 합니다.([예시](https://github.com/42organization/42gg.client/blob/main/README.md)) +## ✨ 주요 기능 소개 -## todo list 만들기 +### ✏️ 할 일을 추가할 수 있습니다 -- (필수) Javascript, HTML, CSS -- (필수) todo 생성(Create), 조회(Read) 기능 구현하기 (새로고침 고려 X) -- (선택) todo 수정(Update), 삭제(Delete) 기능 구현하기 (새로고침 고려 X) -- (선택) 디자인 적용하기 -- (선택) 무료로 배포하기 +add_todo_1 +add_todo_2 -## 참고 +### ✏️ 할 일을 삭제할 수 있습니다 -- 데이터 관리는 하단의 방식 중 하나 선택하시면 됩니다. - - localstorage - - local server(예. [https://github.com/shal0mdave/todo-api.git](https://github.com/shal0mdave/todo-api.git), lowdb) - - mock api(예. [https://dummyjson.com/](https://dummyjson.com/)) -- todo list를 구현하기 위해 필요한 기능들을 미리 생각(그려보고)해보고, 구현해보세요. -- 궁금한 사항은 issue에 등록해주세요. +SimpleTodo_ScreenShoot_7 +SimpleTodo_ScreenShoot_8 + +### ✏️ 할 일을 수정할 수 있습니다 + +update_todo_1 +update_todo_2 + +### ✏️ 완료한 할 일은 클릭하여 완료표시할 수 있습니다 + +complete_todo_1 +complete_todo_2 \ No newline at end of file From e253cde14df17d9073409599f24e28e2370319d5 Mon Sep 17 00:00:00 2001 From: Yoon Jeongyeon Date: Wed, 29 Mar 2023 15:49:53 +0900 Subject: [PATCH 13/15] =?UTF-8?q?[Docs]=20README=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EB=B0=B0=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index e204e81..babc50a 100644 --- a/README.md +++ b/README.md @@ -6,20 +6,16 @@ ### ✏️ 할 일을 추가할 수 있습니다 -add_todo_1 -add_todo_2 +add_todo_1    add_todo_2 ### ✏️ 할 일을 삭제할 수 있습니다 -SimpleTodo_ScreenShoot_7 -SimpleTodo_ScreenShoot_8 +SimpleTodo_ScreenShoot_7    SimpleTodo_ScreenShoot_8 ### ✏️ 할 일을 수정할 수 있습니다 -update_todo_1 -update_todo_2 +update_todo_1    update_todo_2 ### ✏️ 완료한 할 일은 클릭하여 완료표시할 수 있습니다 -complete_todo_1 -complete_todo_2 \ No newline at end of file +complete_todo_1    complete_todo_2 From aa8e6c7271de93fa2acc5ce450d360f6830b7926 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 29 Mar 2023 17:21:39 +0900 Subject: [PATCH 14/15] =?UTF-8?q?[Docs]=20=EB=B0=B0=ED=8F=AC=20=EB=A7=81?= =?UTF-8?q?=ED=81=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index babc50a..da19b24 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # 42gg 프론트엔드 온보딩 1단계 -📝 ToDo List 만들기 +## 📝 ToDo List 만들기 + +[⭐️ 배포 페이지 ⭐️](https://verysimpletodolist.netlify.app/) ## ✨ 주요 기능 소개 From 8d87dc86528cfa7a240854cc76e08fb9fd0eb847 Mon Sep 17 00:00:00 2001 From: Yoon Jeongyeon Date: Wed, 5 Jul 2023 17:40:54 +0900 Subject: [PATCH 15/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index da19b24..1607ccc 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## 📝 ToDo List 만들기 -[⭐️ 배포 페이지 ⭐️](https://verysimpletodolist.netlify.app/) +[✨ 배포 페이지 ✨](https://verysimpletodolist.netlify.app/) ## ✨ 주요 기능 소개