From 31fd40434d1b7721cfa643bac31a40e828e23783 Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Fri, 6 Sep 2024 12:30:03 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Feat:=20=EC=A0=84=EC=B2=B4=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EA=B5=AC=EC=A1=B0=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 29 ++++++++++++++++++++++++++++- src/checked.svg | 4 ++++ src/deleteBtn.svg | 4 ++++ src/toTomorrow.svg | 4 ++++ src/toYesterday.svg | 4 ++++ src/unchecked.svg | 3 +++ 6 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/checked.svg create mode 100644 src/deleteBtn.svg create mode 100644 src/toTomorrow.svg create mode 100644 src/toYesterday.svg create mode 100644 src/unchecked.svg diff --git a/index.html b/index.html index d241b1b..23ca6c8 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,34 @@ -
+
+ +
+

할 일 2개

+

2024년 9월 6일

+

금요일

+ +
+
+ +
+
+ +
    +
  • + + 비오네 + +
    • +
  • + + 가로수길 가기 + +
    • +
+
+ +
diff --git a/src/checked.svg b/src/checked.svg new file mode 100644 index 0000000..43c4286 --- /dev/null +++ b/src/checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/deleteBtn.svg b/src/deleteBtn.svg new file mode 100644 index 0000000..87b170a --- /dev/null +++ b/src/deleteBtn.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/toTomorrow.svg b/src/toTomorrow.svg new file mode 100644 index 0000000..594e8f6 --- /dev/null +++ b/src/toTomorrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/toYesterday.svg b/src/toYesterday.svg new file mode 100644 index 0000000..1812f9e --- /dev/null +++ b/src/toYesterday.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/unchecked.svg b/src/unchecked.svg new file mode 100644 index 0000000..83881b6 --- /dev/null +++ b/src/unchecked.svg @@ -0,0 +1,3 @@ + + + From 9117f2abe2ff587e5a7ef236666cca1dbb1d6966 Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Fri, 6 Sep 2024 13:38:51 +0900 Subject: [PATCH 2/7] =?UTF-8?q?Style:=20CSS=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EB=A7=81=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +-- style.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 90 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 23ca6c8..e72cc6b 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@
-

할 일 2개

+

할 일 2개

2024년 9월 6일

-

금요일

+

금요일

diff --git a/style.css b/style.css index 599136a..f949881 100644 --- a/style.css +++ b/style.css @@ -1 +1,88 @@ -/* 본인의 디자인 감각을 최대한 발휘해주세요! */ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Pretendard"; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #F3FAFF; +} + +.container { + display: flex; + justify-content: space-between; + align-items: center; + width: 50%; + min-width: 550px; + max-width: 650px; + margin: 0 auto; +} + +.main { + text-align:left; + background: white; + padding: 7% 15% 7% 15%; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + flex-grow: 1; + margin: 0 20px; +} + +.leftNum { + color: #91D1FF; + margin-bottom: 8px; + /* 폰트 굵기 설정하기 */ +} + +.day { + margin-top: 8px; + /* 폰트 굵기 설정하기 */ +} + +.todoList { + list-style: none; + padding: 0; + margin-top: 20px; +} + +.todoList li { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #C0C0C0; +} + +.todoList img { + width: 20px; + height: 20px; + cursor: pointer; +} + +.TodoInput { + width: 100%; + padding: 10px; + border: 1px solid #91D1FF; + border-radius: 10px; +} + +form { + margin-top: 20px; +} + +img { + cursor: pointer; +} + +img[src*="toYesterday"], +img[src*="toTomorrow"] { + width: 40px; + height: 40px; +} From 3337810be24a16b228670596d6da269280ae8d60 Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Fri, 6 Sep 2024 23:32:18 +0900 Subject: [PATCH 3/7] =?UTF-8?q?Feat:=20=EB=82=A0=EC=A7=9C=20=EB=B0=8F=20?= =?UTF-8?q?=EC=9A=94=EC=9D=BC=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20/=20?= =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 13 ++++--------- script.js | 42 +++++++++++++++++++++++++++++++++++++++++- style.css | 8 +++++++- 3 files changed, 52 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index e72cc6b..f492618 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@
-

할 일 2개

-

2024년 9월 6일

-

금요일

+

할 일 n개

+

날짜

+

요일

@@ -24,12 +24,7 @@

2024년 9월 6일

  • - 비오네 - -
    • -
  • - - 가로수길 가기 + 세오스 1주차 과제하기
diff --git a/script.js b/script.js index 355dcc2..e063ed1 100644 --- a/script.js +++ b/script.js @@ -1 +1,41 @@ -//😍CEOS 20기 프론트엔드 파이팅😍 +// 날짜 포맷 +function formatDate(date) { + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString(); + const day = date.getDate().toString(); + return `${year}년 ${month}월 ${day}일`; + } + +// 요일 포맷 +function formatDay(date) { + const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; + return days[date.getDay()]; + } + +function dateDisplay(date) { + document.querySelector('.date').textContent = formatDate(date); + document.querySelector('.day').textContent = formatDay(date); + } + +let currentDate = new Date(); +dateDisplay(currentDate); + +// 어제 날짜로 이동 +document.querySelector('img[src*="toYesterday"]').addEventListener('click', () => { + currentDate.setDate(currentDate.getDate() - 1); + dateDisplay(currentDate); + loadTodoList(currentDate); +}); + +// 내일 날짜로 이동 +document.querySelector('img[src*="toTomorrow"]').addEventListener('click', () => { + currentDate.setDate(currentDate.getDate() + 1); + dateDisplay(currentDate); + loadTodoList(currentDate); +}); + +function loadTodoList(date) { + const todoList = document.querySelector('.todoList'); + todoList.textContent = ''; + } + \ No newline at end of file diff --git a/style.css b/style.css index f949881..4a73ab0 100644 --- a/style.css +++ b/style.css @@ -55,9 +55,15 @@ body { .todoList li { display: flex; align-items: center; - justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #C0C0C0; + margin-top: 5px; + margin-bottom: 5px; +} + +span { + margin-left: 5%; + width: 80%; } .todoList img { From 09c8b27d025f79051da3f2a069a908a38296d5a5 Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Sat, 7 Sep 2024 00:26:21 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Feat:=20=ED=88=AC=EB=91=90=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=EC=82=AD=EC=A0=9C,=20=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 ++-- script.js | 125 ++++++++++++++++++++++++++++++++++++++++------------- style.css | 2 +- 3 files changed, 100 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index f492618..88e6927 100644 --- a/index.html +++ b/index.html @@ -17,15 +17,15 @@

날짜

- +
  • - - 세오스 1주차 과제하기 - + + 세오스 1주차 과제 하기 +
diff --git a/script.js b/script.js index e063ed1..0c71a1f 100644 --- a/script.js +++ b/script.js @@ -1,41 +1,106 @@ // 날짜 포맷 function formatDate(date) { - const year = date.getFullYear(); - const month = (date.getMonth() + 1).toString(); - const day = date.getDate().toString(); - return `${year}년 ${month}월 ${day}일`; - } - + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString(); + const day = date.getDate().toString(); + return `${year}년 ${month}월 ${day}일`; +} + // 요일 포맷 function formatDay(date) { - const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; - return days[date.getDay()]; - } - + const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; + return days[date.getDay()]; +} + function dateDisplay(date) { - document.querySelector('.date').textContent = formatDate(date); - document.querySelector('.day').textContent = formatDay(date); - } - + document.querySelector('.date').innerHTML = formatDate(date); + document.querySelector('.day').innerHTML = formatDay(date); +} + +// 투두 렌더링 +function loadTodoList(date) { + const todoList = getTodoList(date); + const todoListContainer = document.querySelector('.todoList'); + todoListContainer.innerHTML= ''; + + todoList.forEach((todo, index) => { + const todoItem = document.createElement('li'); + const checkedStatus = todo.completed ? 'checked' : 'unchecked'; + const textColor = todo.completed ? '#C0C0C0' : '#000000'; + + todoItem.innerHTML = ` + + ${todo.text} + + `; + + // 체크박스 + todoItem.querySelector('.toggleComplete').addEventListener('click', () => { + todo.completed = !todo.completed; + saveTodoList(date, todoList); + loadTodoList(date); + }); + + // 삭제 버튼 + todoItem.addEventListener('mouseover', () => { + todoItem.querySelector('.deleteBtn').style.display = 'inline'; + }); + + todoItem.addEventListener('mouseout', () => { + todoItem.querySelector('.deleteBtn').style.display = 'none'; + }); + + todoItem.querySelector('.deleteBtn').addEventListener('click', () => { + todoList.splice(index, 1); + saveTodoList(date, todoList); + loadTodoList(date); + }); + + todoListContainer.appendChild(todoItem); + }); +} + +// 투두 추가 +function addTodoItem(date, todoText) { + if (!todoText) return; + + const todoList = getTodoList(date); + const newTodo = { text: todoText, completed: false }; + todoList.push(newTodo); + saveTodoList(date, todoList); + loadTodoList(date); +} + +document.querySelector('#inputForm').addEventListener('submit', (e) => { + e.preventDefault(); + const todoInput = document.querySelector('.todoInput'); + addTodoItem(currentDate, todoInput.value); + todoInput.value = ''; +}); + +// 날짜 이동 let currentDate = new Date(); dateDisplay(currentDate); - -// 어제 날짜로 이동 +loadTodoList(currentDate); + document.querySelector('img[src*="toYesterday"]').addEventListener('click', () => { - currentDate.setDate(currentDate.getDate() - 1); - dateDisplay(currentDate); - loadTodoList(currentDate); + currentDate.setDate(currentDate.getDate() - 1); + dateDisplay(currentDate); + loadTodoList(currentDate); }); - -// 내일 날짜로 이동 + document.querySelector('img[src*="toTomorrow"]').addEventListener('click', () => { - currentDate.setDate(currentDate.getDate() + 1); - dateDisplay(currentDate); - loadTodoList(currentDate); + currentDate.setDate(currentDate.getDate() + 1); + dateDisplay(currentDate); + loadTodoList(currentDate); }); - -function loadTodoList(date) { - const todoList = document.querySelector('.todoList'); - todoList.textContent = ''; - } - \ No newline at end of file + +// local storage 관련 코드 +function getTodoList(date) { + const storedTodos = localStorage.getItem(date.toDateString()); + return storedTodos ? JSON.parse(storedTodos) : []; +} + +function saveTodoList(date, todoList) { + localStorage.setItem(date.toDateString(), JSON.stringify(todoList)); +} \ No newline at end of file diff --git a/style.css b/style.css index 4a73ab0..f2405b9 100644 --- a/style.css +++ b/style.css @@ -72,7 +72,7 @@ span { cursor: pointer; } -.TodoInput { +.todoInput { width: 100%; padding: 10px; border: 1px solid #91D1FF; From 624f08612afe839a61b05c35f46a02101928ad68 Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Sat, 7 Sep 2024 00:37:42 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Feat:=20=EB=82=A8=EC=9D=80=20=ED=95=A0=20?= =?UTF-8?q?=EC=9D=BC=20=EA=B0=9C=EC=88=98=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/script.js b/script.js index 0c71a1f..9493a51 100644 --- a/script.js +++ b/script.js @@ -58,6 +58,8 @@ function loadTodoList(date) { todoListContainer.appendChild(todoItem); }); + + updateLeftNum(todoList) } // 투두 추가 @@ -78,6 +80,12 @@ document.querySelector('#inputForm').addEventListener('submit', (e) => { todoInput.value = ''; }); +// 남은 할 일 개수 +function updateLeftNum(todoList) { + const leftNum = todoList.filter(todo => !todo.completed).length; + document.querySelector('.leftNum').innerHTML = `할 일 ${leftNum}개`; +} + // 날짜 이동 let currentDate = new Date(); dateDisplay(currentDate); From 59999d5eb1306249e461ee6a7c37e516ad56600c Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Sat, 7 Sep 2024 00:42:40 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Style:=20Pretendard=20=ED=8F=B0=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=B5=EA=B8=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index f2405b9..ab67745 100644 --- a/style.css +++ b/style.css @@ -38,12 +38,12 @@ body { .leftNum { color: #91D1FF; margin-bottom: 8px; - /* 폰트 굵기 설정하기 */ + font-weight: 500; } .day { margin-top: 8px; - /* 폰트 굵기 설정하기 */ + font-weight: 500; } .todoList { From b63ae55f8fc247cd655dbeba743d2e6109d49b57 Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Sat, 7 Sep 2024 00:49:19 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Chore:=20Vercel=20=EB=B8=8C=EB=9E=9C?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD=20=EC=9E=AC=EB=B0=B0=ED=8F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script.js b/script.js index 9493a51..9786083 100644 --- a/script.js +++ b/script.js @@ -34,7 +34,7 @@ function loadTodoList(date) { `; - // 체크박스 + // 투두 완료 todoItem.querySelector('.toggleComplete').addEventListener('click', () => { todo.completed = !todo.completed; saveTodoList(date, todoList);