[1주차] 이가빈 미션 제출합니다.

index.html

@@ -17,15 +17,15 @@ <h1 class="date">날짜</h1>
 
         <div class="input">
           <form id="inputForm">
-            <input type="text" class="TodoInput" placeholder="To Do 입력 후 Enter">
+            <input type="text" class="todoInput" placeholder="To Do 입력 후 Enter">
           </form>
         </div>
 
         <ul class="todoList">
           <li>
-            <img src="./src/unchecked.svg">
-            <span>세오스 1주차 과제하기</span>
-            <img src="./src/deleteBtn.svg">
+            <img src="./src/${checkedStatus}.svg" class="toggleComplete">
+            <span style="color: #000000;">세오스 1주차 과제 하기</span>
+            <img src="./src/deleteBtn.svg" class="deleteBtn" style="display: none;">
           </li>
         </ul>
       </div>

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 = `
+      <img src="./src/${checkedStatus}.svg" class="toggleComplete">
+      <span style="color: ${textColor};">${todo.text}</span>
+      <img src="./src/deleteBtn.svg" class="deleteBtn" style="display: none;">
+    `;
+
+    // 체크박스
+    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 = '';
-  }
-
+
+// 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));
+}

style.css

@@ -72,7 +72,7 @@ span {
     cursor: pointer;
 }
 
-.TodoInput {
+.todoInput {
     width: 100%;
     padding: 10px;
     border: 1px solid #91D1FF;