CEOS-Developers · jiwonnchoi · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/images/delete_btn.svg b/images/delete_btn.svg
diff --git a/images/empty_checkbox.svg b/images/empty_checkbox.svg
diff --git a/images/full_checkbox.svg b/images/full_checkbox.svg
diff --git a/index.html b/index.html
@@ -3,12 +3,52 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vanilla Todo</title>
+    <title>TodoList</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
     <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="images/full_checkbox.svg" />
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <header>
+        <h1 class="today"></h1>
+      </header>
+      <nav class="box-style">
+        <span class="ment-style">당신의 할 일을 작성해보세요 ✏️</span>
+        <hr />
+        <button class="show-input ment-style">입력창 불러오기</button>
+      </nav>
+      <main class="box-style">
+        <section class="todo">
+          <div class="todo-top">
+            <h2 class="ment-style">What I have to do</h2>
+            <form class="input-box box-style" style="display: none">
+              <input class="input" />
+              <button class="bold-style">작성하기</button>
+            </form>
+          </div>
+          <ul class="todoList"></ul>
+        </section>
+        <section class="done">
+          <h2 class="ment-style">What I did</h2>
+          <ul class="doneList"></ul>
+        </section>
+      </main>
+      <footer>
+        <span>
+          <span class="today">Total: </span>
+          <span class="count bold-style"></span>
+        </span>
+        <span>
+          <span class="today">Accomplishment: </span>
+          <span class="accomplishment bold-style"></span>
+        </span>
+      </footer>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,224 @@
-//😍CEOS 20기 프론트엔드 파이팅😍
+/* 날짜 및 현재 시각 */
+const updateTime = () => {
+  const today = document.querySelector(".today");
+  const now = new Date();
+
+  const options = {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  };
+
+  // 요일, 날짜 및 시각 포맷 적용
+  today.innerHTML = now.toLocaleString("ko-KR", options);
+};
+
+updateTime();
+setInterval(updateTime, 1000); // 1초마다 호출
-setInterval(updateTime, 1000); // 1초마다 호출
+updateTime();
+setInterval(updateTime, 1000);
-setInterval(updateTime, 1000); // 1초마다 호출
+updateTime();
+setInterval(updateTime, 1000);
+
+/* localStorage 데이터 처리 */
+// localStorage에 항목 저장하기 함수
+const saveToLocalStorage = (key, data) => {
+  localStorage.setItem(key, JSON.stringify(data));
+};
+
+// localStorage의 항목 불러오기 함수
+const loadFromLocalStorage = (key) => {
+  const data = localStorage.getItem(key);
+  return data ? JSON.parse(data) : [];
+};
+
+let todos = loadFromLocalStorage("todos"); // 할 일 배열
+let dones = loadFromLocalStorage("dones"); // 한 일 배열
+
+// localStorage의 항목으로 초기화하기 함수
+const initTodoList = () => {
+  todos.forEach((todo) => printItem(todo.text, "todo", todo.id));
+  dones.forEach((done) => printItem(done.text, "done", done.id));
+};
+
+// 할 일과 한 일 개수 및 성취도 업데이트 함수
+const updateCounts = () => {
+  const totalCount = todos.length + dones.length;
+  const doneCount = dones.length;
+  const countElement = document.querySelector(".count");
+  const accomplishmentElement = document.querySelector(".accomplishment");
+
+  countElement.innerText = totalCount;
+  accomplishmentElement.innerText =
+    totalCount > 0 ? `${doneCount}/${totalCount}` : "0/0";
+};
+
+// 이벤트 위임으로 버튼 클릭 처리를 위한 리스너 추가
+document.querySelector(".todoList").addEventListener("click", (e) => {
+  if (e.target.closest(".todo-check")) {
+    completeTodo(e);
+  } else if (e.target.closest(".todo-del")) {
+    deleteTodoItem(e);
+  }
+});
+
+document.querySelector(".doneList").addEventListener("click", (e) => {
+  if (e.target.closest(".todo-check")) {
+    restoreTodo(e);
+  } else if (e.target.closest(".todo-del")) {
+    deleteDoneItem(e);
+  }
+});
+
+// 버튼 생성하기 함수
+const createBtn = (src, className) => {
+  const btn = document.createElement("button");
+  const img = document.createElement("img");
+  img.setAttribute("src", src);
+  btn.appendChild(img);
+  btn.setAttribute("class", className);
+
+  return btn;
+};
+
+// 항목 출력하기 함수
+const printItem = (text, type, id) => {
+  const list = document.querySelector(`.${type}List`);
+  const item = document.createElement("li");
+  const itemContent = document.createElement("div");
+  const itemText = document.createElement("span");
+  itemText.innerText = text;
+  itemText.className = `${type}-text`;
+  item.setAttribute("data-id", id);
+
+  // 체크 버튼 생성하기
+  const checkBtn = createBtn(
+    type === "todo" ? "images/empty_checkbox.svg" : "images/full_checkbox.svg",
+    "todo-check"
+  );
+
+  // 삭제 버튼 생성하기
+  const deleteBtn = createBtn("images/delete_btn.svg", "todo-del");
+
+  // 항목 구성하기
+  itemContent.className = "todo-item";
+  itemContent.appendChild(checkBtn);
+  itemContent.appendChild(itemText);
+  itemContent.appendChild(deleteBtn);
+
+  item.appendChild(itemContent);
+  list.appendChild(item);
+};
+
+// 할 일 추가하기 함수
+const addTodoItem = (event) => {
-const addTodoItem = (event) => {
+// 할 일 추가하기 함수 (고유 id 추가)
+const addTodoItem = (event) => {
+  event.preventDefault();
+  const todoInput = document.querySelector(".input").value.trim(); // 입력값 공백 확인
+  if (todoInput) {
+    const todoItem = { id: Date.now(), text: todoInput };  // 고유 id 추가
+    todos.push(todoItem);
+    saveToLocalStorage("todos", todos); // 업데이트된 todos 배열을 localStorage에 저장
+    printItem(todoItem, "todo"); // 객체 전체 전달
+    document.querySelector(".input").value = ""; // 입력창 초기화
+    updateCounts();
+  }
+};
-const addTodoItem = (event) => {
+// 할 일 추가하기 함수 (고유 id 추가)
+const addTodoItem = (event) => {
+  event.preventDefault();
+  const todoInput = document.querySelector(".input").value.trim(); // 입력값 공백 확인
+  if (todoInput) {
+    const todoItem = { id: Date.now(), text: todoInput };  // 고유 id 추가
+    todos.push(todoItem);
+    saveToLocalStorage("todos", todos); // 업데이트된 todos 배열을 localStorage에 저장
+    printItem(todoItem, "todo"); // 객체 전체 전달
+    document.querySelector(".input").value = ""; // 입력창 초기화
+    updateCounts();
+  }
+};
+  event.preventDefault();
+  const inputElement = document.querySelector(".input");
+  const todoInput = inputElement.value.trim(); // 입력값 공백 확인
+
+  if (todoInput) {
+    const todoItem = { id: Date.now().toString(), text: todoInput };
+
+    todos.push(todoItem);
+    saveToLocalStorage("todos", todos); // 업데이트된 todos 배열을 localStorage에 저장
+    printItem(todoInput, "todo", todoItem.id);
+    document.querySelector(".input").value = ""; // 입력창 초기화
+    updateCounts();
+  }
+};
+
+// 항목 삭제하기 함수
+const deleteItem = (e, array, key, listSelector) => {
+  const target = e.target.closest("li");
+  const itemId = target.getAttribute("data-id");
+
+  array = array.filter((item) => item.id !== itemId);
+  saveToLocalStorage(key, array);
+
+  document.querySelector(listSelector).removeChild(target);
+  return array;
+};
+
+const deleteTodoItem = (e) => {
+  todos = deleteItem(e, todos, "todos", ".todoList");
+  updateCounts();
+};
+
+const deleteDoneItem = (e) => {
+  dones = deleteItem(e, dones, "dones", ".doneList");
+  updateCounts();
+};
+
+// 할 일에서 한 일로 이동 함수
+const completeTodo = (e) => {
+  const target = e.target.closest("li");
+  const todoItem = {
+    id: target.getAttribute("data-id"),
+    text: target.innerText,
+  };
+  // const todoText = target.querySelector(".todo-text").innerText;
+  todos = deleteItem(e, todos, "todos", ".todoList");
+  dones.push(todoItem);
+  saveToLocalStorage("dones", dones); // 한 일 저장
+  printItem(todoItem.text, "done", todoItem.id);
+  updateCounts();
+};
+
+// 한 일에서 할 일로 이동 함수
+const restoreTodo = (e) => {
+  const target = e.target.closest("li");
+  const doneItem = {
+    id: target.getAttribute("data-id"),
+    text: target.innerText,
+  };
+  //const doneText = target.querySelector(".done-text").innerText;
+  dones = deleteItem(e, dones, "dones", ".doneList");
+  todos.push(doneItem);
+  saveToLocalStorage("todos", todos); // 할 일 저장
+  printItem(doneItem.text, "todo", doneItem.id);
+  updateCounts();
+};
+
+/* todo 입력, 체크, 삭제 */
+const form = document.querySelector(".input-box"); // 입력창 폼 요소
+const showMessage = document.querySelector(".show-input"); // 입력창 열고 닫는 버튼 요소
+
+// 입력창 토글 함수
+let isFormOpen = false;
+
+const toggleForm = () => {
+  if (isFormOpen) {
+    form.classList.remove("show");
+    form.classList.add("hide");
+    isFormOpen = false;
+
+    showMessage.innerHTML = "입력창 불러오기";
+  } else {
+    form.style.display = "flex";
+    form.classList.remove("hide");
+    form.classList.add("show");
+    isFormOpen = true;
+
+    showMessage.innerHTML = "입력창 다시닫기";
+  }
+};
+
+// 애니메이션 종료 처리하는 이벤트리스너
+const handleAnimationEnd = (e) => {
+  if (form.classList.contains("hide")) {
+    form.style.display = "none";
+    form.classList.remove("hide");
+  }
+};
+
+// 이벤트 리스너 등록 및 기존 데이터 불러오기 함수
+const init = () => {
+  initTodoList();
+  updateCounts();
+  form.addEventListener("submit", addTodoItem);
+  form.addEventListener("animationend", handleAnimationEnd);
+  showMessage.addEventListener("click", toggleForm);
+};
+
+init();