[1주차] 김동혁 미션 제출합니다.

index.html

@@ -16,12 +16,15 @@ <h1 class="title">오늘 할 일</h1>
 
         <!-- input container -->
         <div class="WriteForm">
-          <div class="writeTodoForm">
+          <form id="todoForm" class="writeTodoForm">
             <img src="./icon/check.svg" class="check_icon" />
             <input type="text" class="TodoInput" placeholder="할 일 추가" />
-            <button class="submitBtn">추가하기</button>
-          </div>
+            <button class="submitBtn">추가</button>
+          </form>
         </div>
+
+        <!-- todo list -->
+        <ul class="todoList"></ul>
       </div>
     </div>
   </body>

script.js

@@ -8,3 +8,97 @@ const options = {
 const dateString = today.toLocaleDateString("ko-KR", options);
 
 document.getElementById("todayDate").innerText = dateString;
+
+document.addEventListener("DOMContentLoaded", function () {
+  const todoForm = document.getElementById("todoForm");
+  const inputField = document.querySelector(".TodoInput");
+  const todoList = document.querySelector(".todoList");
+
+  // 할 일 목록 불러오기 및 표시
+  function loadToDos() {
+    // 목록을 비우기
+    while (todoList.firstChild) {
+      todoList.removeChild(todoList.firstChild);
+    }
+
+    // 로컬 스토리지에서 할 일 목록을 불러와서 페이지에 추가
+    const toDos = JSON.parse(localStorage.getItem("toDos")) || [];
+    toDos.forEach((todo) => {
+      addTodoItem(todo, false); // 이미 저장된 항목을 불러오므로, 여기서는 save 파라미터를 false로 설정
+    });
+  }
+
+  // 할 일 추가
+  function addTodoItem(todoText, save = true) {
+    const todoItem = document.createElement("li");
+    todoItem.classList.add("animate-slide-down");
+
+    const todoTextContent = document.createElement("span");
+    todoTextContent.textContent = todoText;
+
+    // 삭제 버튼
+    const deleteButton = document.createElement("button");
+    deleteButton.textContent = "삭제";
+    deleteButton.onclick = function () {
+      todoList.removeChild(todoItem);
+      removeTodoFromStorage(todoText);
+    };
+
+    // 완료 체크 이미지 생성
+    const completeCheck = document.createElement("img");
+    completeCheck.src = "./icon/NotCheck.svg";
+    completeCheck.style.cursor = "pointer";
+    completeCheck.setAttribute("data-checked", "false");
+
+    completeCheck.onclick = function () {
+      const isChecked = this.getAttribute("data-checked") === "true";
+      if (isChecked) {
+        this.src = "./icon/NotCheck.svg";
+        this.setAttribute("data-checked", "false");
+        todoTextContent.style.textDecoration = "none";
+        todoItem.style.color = "white";
+      } else {
+        this.src = "./icon/checkComplete.svg";
+        this.setAttribute("data-checked", "true");
+        todoTextContent.style.textDecoration = "line-through";
+        todoItem.style.color = "#808080";
+      }
+    };
+
+    todoList.insertBefore(todoItem, todoList.firstChild);
+    todoItem.appendChild(completeCheck);
+    todoItem.appendChild(todoTextContent);
+    todoItem.appendChild(deleteButton);
+
+    if (save) {
+      saveTodoToStorage(todoText);
+    }
+  }
+
+  // 로컬 스토리지에 할 일 저장
+  function saveTodoToStorage(todoText) {
+    const toDos = JSON.parse(localStorage.getItem("toDos")) || [];
+    toDos.push(todoText);
+    localStorage.setItem("toDos", JSON.stringify(toDos));
+  }
+
+  // 로컬 스토리지에서 할 일 삭제
+  function removeTodoFromStorage(todoText) {
+    const toDos = JSON.parse(localStorage.getItem("toDos")) || [];
+    const updatedToDos = toDos.filter((todo) => todo !== todoText);
+    localStorage.setItem("toDos", JSON.stringify(updatedToDos));
+  }
+
+  // 폼 제출 이벤트 처리
+  todoForm.addEventListener("submit", function (e) {
+    e.preventDefault();
+    const todoText = inputField.value.trim();
+    if (todoText !== "") {
+      addTodoItem(todoText);
+      inputField.value = "";
+    }
+  });
+
+  // 페이지 로드 시 할 일 목록 불러오기
+  loadToDos();
+});

style.css

@@ -14,6 +14,23 @@ h1 {
   margin: 0;
 }
 
+/* 애니메이션 */
+@keyframes slideDownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-down {
+  animation: slideDownFadeIn 0.2s ease-out forwards;
+}
+/*  */
+
 .wrapper {
   width: 100%;
   min-height: 100vh;
@@ -101,13 +118,58 @@ h1 {
 .submitBtn {
   cursor: pointer;
   background-color: #252423;
-  border: 1px solid #8e8986;
-  width: 60px;
-  height: 30px;
+  border: 1px solid #788bff;
+  width: 42px;
+  height: 22px;
   border-radius: 10px;
   font-size: 12px;
-  color: #8e8986;
+  color: #788bff;
 }
 .submitBtn:hover {
   background-color: #3c3a39;
 }
+
+.todoList {
+  width: 100%;
+  list-style: none;
+}
+
+.todoList li {
+  width: 100%;
+  height: 52px;
+  border-radius: 10px;
+  font-size: 13px;
+
+  display: flex;
+  justify-content: space-between;
+
+  align-items: center;
+  background-color: #252423;
+  padding-right: 5px;
+  margin: 5px 0px;
+  padding: 0 15px 0 15px;
+  color: #cdcdcd;
+}
+.todoList li span {
+  width: 100%;
+  padding: 0px 26px;
+}
+
+.todoList li input {
+  width: 20px;
+  height: 20px;
+}
+
+.todoList li button {
+  cursor: pointer;
+  background-color: #252423;
+  border: 1px solid #788bff;
+  width: 36px;
+  height: 22px;
+  border-radius: 10px;
+  font-size: 12px;
+  color: #788bff;
+}
+.todoList li button:hover {
+  background-color: #3c3a39;
+}