CEOS-Developers · ddhelop · Mar 11, 2024 · Mar 12, 2024 · Mar 12, 2024 · Mar 13, 2024
diff --git a/icon/NotCheck.svg b/icon/NotCheck.svg
diff --git a/icon/check.svg b/icon/check.svg
diff --git a/icon/checkComplete.svg b/icon/checkComplete.svg
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,7 +8,25 @@
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="wrapper">
+      <div class="header">✓ To Do</div>
-    <div class="wrapper">
-      <div class="header">✓ To Do</div>
+<body>
+    <header>
+      <h1>To Do</h1>
+    </header>
-    <div class="wrapper">
-      <div class="header">✓ To Do</div>
+<body>
+    <header>
+      <h1>To Do</h1>
+    </header>
+      <div class="todoContainer">
+        <h1 class="title">오늘 할 일</h1>
+        <p id="todayDate"></p>
+
+        <!-- input container -->
+        <div class="WriteForm">
+          <form id="todoForm" class="writeTodoForm">
+            <img src="./icon/check.svg" class="check_icon" />
+            <input type="text" class="TodoInput" placeholder="할 일 추가" />
+            <button class="submitBtn">추가</button>
+          </form>
+        </div>
+
+        <!-- todo list -->
+        <ul class="todoList"></ul>
+      </div>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,109 @@
-//CEOS 19기 프론트엔드 파이팅🔥 ദ്ദി˶ˊᵕˋ˵)
+// 오늘 날짜
+const today = new Date();
+const options = {
+  month: "long",
+  day: "numeric",
+  weekday: "long",
+};
+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 () {
+      // 애니메이션 클래스 추가
+      todoItem.classList.add("animate-fade-out");
+
+      todoItem.addEventListener("animationend", () => {
+        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);
-    todoItem.appendChild(completeCheck);
-    todoItem.appendChild(todoTextContent);
-    todoItem.appendChild(deleteButton);
+    todoItem.append(completeCheck, todoTextContent, deleteButton)
-    todoItem.appendChild(completeCheck);
-    todoItem.appendChild(todoTextContent);
-    todoItem.appendChild(deleteButton);
+    todoItem.append(completeCheck, todoTextContent, 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();
+});
diff --git a/style.css b/style.css
@@ -1 +1,190 @@
-/* 본인의 디자인 감각을 최대한 발휘해주세요! */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #252423;
+}
+h1 {
+  font-size: 18px;
+  color: #e9ecef;
+  font-weight: 500;
+  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;
+}
+/*  */
+
+/* 할일 삭제 애니메이션 */
+@keyframes fadeOutScaleDown {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+.animate-fade-out {
+  animation: fadeOutScaleDown 0.3s ease-out forwards;
+}
+/*  */
+
+.wrapper {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+}
+.header {
+  width: 100%;
+  height: 6vh;
+  background-color: #1b1a19;
+
+  color: #e9ecef;
+  text-align: left;
+  padding-left: 45px;
+  line-height: 6vh;
+  font-size: 1.1rem;
+  border-bottom: 1px solid #484644;
+}
+
+.todoContainer {
+  width: 50%;
+  min-height: 95vh;
+  background-color: #1b1a19;
+  padding: 30px;
+  border-radius: 5px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+#todayDate {
+  font-size: 10px;
+  color: gray;
+  margin: 6px 0 0 1px;
+}
+.WriteForm {
+  width: 100%;
+  border-radius: 10px;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  background-color: #252423;
+}
+
+.writeTodoForm {
+  width: 100%;
+  height: 52px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 15px 0 15px;
-  padding: 0 15px 0 15px;
+  padding: 0 15px;
-  padding: 0 15px 0 15px;
+  padding: 0 15px;
+  /* border-bottom: 1px solid #8e8986; */
+}
+.InputFront {
+  width: 15%;
+  height: 50px;
+}
+.TodoInput {
+  width: 100%;
+  height: 50px;
+  background-color: #252423;
+  outline: none;
+  border: none;
+  color: #e9ecef;
+  padding: 10px;
+}
+.TodoInput::placeholder {
+  color: #788bff; /* Placeholder 텍스트 색상 변경 */
+}
+.check_icon {
+  width: 20px;
+  height: 20px;
+  margin: 0 15px 0 0px;
+  fill: #788bff;
+}
+
+.SubmitTodo {
+  width: 100%;
+  height: 43px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  padding-right: 5px;
+}
+.submitBtn {
+  cursor: pointer;
+  background-color: #252423;
+  border: 1px solid #788bff;
+  width: 42px;
+  height: 22px;
+  border-radius: 10px;
+  font-size: 12px;
+  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 26.1px;
+}
+
+.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;
+}