diff --git a/index.html b/index.html index d241b1b..88e6927 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,29 @@ -
+
+ +
+

할 일 n개

+

날짜

+

요일

+ +
+
+ +
+
+ + +
+ +
diff --git a/script.js b/script.js index 355dcc2..9786083 100644 --- a/script.js +++ b/script.js @@ -1 +1,114 @@ -//😍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').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); + }); + + updateLeftNum(todoList) +} + +// 투두 추가 +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 = ''; +}); + +// 남은 할 일 개수 +function updateLeftNum(todoList) { + const leftNum = todoList.filter(todo => !todo.completed).length; + document.querySelector('.leftNum').innerHTML = `할 일 ${leftNum}개`; +} + +// 날짜 이동 +let currentDate = new Date(); +dateDisplay(currentDate); +loadTodoList(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); +}); + +// 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/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 @@ + + + diff --git a/style.css b/style.css index 599136a..ab67745 100644 --- a/style.css +++ b/style.css @@ -1 +1,94 @@ -/* 본인의 디자인 감각을 최대한 발휘해주세요! */ +@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; + font-weight: 500; +} + +.day { + margin-top: 8px; + font-weight: 500; +} + +.todoList { + list-style: none; + padding: 0; + margin-top: 20px; +} + +.todoList li { + display: flex; + align-items: center; + padding: 10px 0; + border-bottom: 1px solid #C0C0C0; + margin-top: 5px; + margin-bottom: 5px; +} + +span { + margin-left: 5%; + width: 80%; +} + +.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; +}