CEOS-Developers · kongnayeon · Sep 14, 2022 · Sep 16, 2022 · Sep 16, 2022 · Sep 16, 2022
diff --git a/index.html b/index.html
@@ -3,12 +3,25 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vanilla Todo</title>
+    <title>💭 Todo</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <h1>Things to do</h1>
+      <form id="input-form">
+        <input id="input-text" type="text" placeholder="📍 Enter your to-do" />
+        <button id="input-button" onclick="addTodoList()">+</button>
+      </form>
+      <section class="todo-section">
+        <h2>📂 to do <span id="todo-count"></span></h2>
+        <ul id="todo-list"></ul>
+      </section>
+      <section class="done-section">
+        <h2>🗑 done<span id="done-count"></span></h2>
+        <ul id="done-list"></ul>
+      </section>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,91 @@
+let itemList = [];
+
+// 로컬 스토리지에서 값을 불러와 화면에 그려 준다
+const renderTodoItem = () => {
+  const savedTodo = localStorage.getItem("itemList");
+
+  const todoList = document.getElementById("todo-list");
+  const doneList = document.getElementById("done-list");
+
+  // 덮어쓰지 않도록 초기화
+  todoList.innerHTML = "";
+  doneList.innerHTML = "";
+
+  // 데이터가 존재하는지 확인
+  if (savedTodo) {
+    itemList = JSON.parse(savedTodo);
+
+    itemList.forEach((savedItem) => {
+      const item = document.createElement("li");
+
+      const itemText = document.createElement("span");
+      itemText.className = "item-text";
+      itemText.addEventListener("click", toggleItem);
+      itemText.innerText = savedItem.text;
+
+      const deleteButton = document.createElement("button");
+      deleteButton.className = "delete-button";
+      deleteButton.addEventListener("click", removeItem);
+      deleteButton.innerText = "🧹";
+
+      item.appendChild(itemText);
+      item.appendChild(deleteButton);
+
+      if (!savedItem.isDone) {
+        todoList.appendChild(item);
+        // deleteButton.appendChild(todoList);
+      } else {
+        doneList.appendChild(item);
+        //deleteButton.appendChild(item);
+      }
+    });
+  }
+  countItem();
+};
+
+// 새로운 할 일을 입력 받을 때 로컬 스토리지에 추가한다
+const addTodoList = () => {
+  event.preventDefault;
-const addTodoList = () => {
-  event.preventDefault;
+const addTodoList = (event) => {
+  event.preventDefault();
-const addTodoList = () => {
-  event.preventDefault;
+const addTodoList = (event) => {
+  event.preventDefault();
+  const inputObject = {
+    id: Date.now(),
+    text: document.getElementById("input-text").value,
+    isDone: false,
+  };
+  if (inputObject.text) {
+    // 빈 입력은 받지 않음
+    itemList = [...itemList, inputObject];
+    localStorage.setItem("itemList", JSON.stringify(itemList)); // 로컬 스토리지에 저장
+    renderTodoItem();
+  }
+};
+
+// isDone의 상태를 반대로 바꿔 준다
+const toggleItem = (e) => {
+  const itemObject = itemList.find(
+    (inputObject) => inputObject.text === e.target.innerText
+  );
+  itemObject.isDone = !itemObject.isDone;
+  localStorage.setItem("itemList", JSON.stringify(itemList)); // 로컬 스토리지 갱신
+  renderTodoItem();
+};
+
+// 로컬 스토리지에서 값을 삭제한다
+const removeItem = (e) => {
+  const filteredList = itemList.filter(
+    (inputObject) =>
+      inputObject.text !== e.target.parentNode.innerText.slice(0, -2)
+  );
+  localStorage.setItem("itemList", JSON.stringify(filteredList)); // 로컬 스토리지 갱신
+  renderTodoItem();
+};
+
+// todo, done의 수 카운트
+const countItem = () => {
+  const todoCount = document.getElementById("todo-count");
+  todoCount.innerText = ` (${itemList.filter((item) => !item.isDone).length})`;
+
+  const doneCount = document.getElementById("done-count");
+  doneCount.innerText = ` (${itemList.filter((item) => item.isDone).length})`;
+};
+
+window.onload = renderTodoItem();
diff --git a/style.css b/style.css
@@ -0,0 +1,84 @@
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
+    format("woff");
+  font-weight: 800;
+  font-style: normal;
+}
+
+body {
+  height: 100vh;
+  background: linear-gradient(to left, rgb(221, 202, 209), rgb(210, 173, 190));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Pretendard-Regular";
+}
+
+.container {
+  background-color: rgba(255, 255, 255, 0.8);
+  width: 22rem;
+  height: 40rem;
+  border-radius: 20px;
+  box-shadow: 0px 0px 20px rgb(125, 123, 125);
+  display: flex;
+  flex-direction: column;
+}
+
+h1,
+h2 {
+  margin-left: 5%;
+  margin-bottom: 0;
+}
+
+button {
+  border: 0;
+  background: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+/* 
+li {
+  cursor: pointer;
+}
+
+button {
+  cursor: pointer;
+} */
+
+/* input-form */
+
+#input-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+#input-text {
+  width: 80%;
+  height: 30px;
+  font-size: 18px;
+  border: 0;
+  border-radius: 15px;
+  outline: none;
+  background-color: rgba(213, 213, 213, 0.5);
+}
+
+/* todo-section, done-section */
+
+.todo-section,
+.done-section {
+  flex: 0.5;
+  border-top: 1px solid rgb(213, 213, 213);
+}
+
+#todo-list,
+#done-list {
+  cursor: pointer;
+  list-style: none;
+  padding-left: 1rem;
+  margin: 0;
+  overflow: auto;
+}