URECA-ReCoder · ongheong · Aug 27, 2024 · Aug 27, 2024 · Aug 27, 2024 · Aug 27, 2024
diff --git a/grid.jpg b/grid.jpg
diff --git a/index.html b/index.html
@@ -6,9 +6,25 @@
     <title>Vanilla Todo</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <header>Todo List</header>
+      <form id="input-form" onsubmit="return false;">
+        <label for="todo-input">할 일 : </label>
+        <input id="todo-input" placeholder="할 일을 입력하세요" />
+        <button id="input-btn">+</button>
+      </form>
+      <section id="todo-list-section">
+        <h4 class="section-title" id="todo-num">📋 Todo (0)</h4>
+        <ul id="todo-list">
+        </ul>
+      </section>
+      <section id="done-list-section">
+        <h4 class="section-title done" id="done-num">👍🏻 Done (0)</h4>
+        <ul id="done-list">
+        </ul>
+      </section>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,112 @@
-// 다들 화이팅!! ٩( *˙0˙*)۶
+// 다들 화이팅!! ٩( *˙0˙*)۶
+
+window.onload = function () {
+  // 창을 새로고침해도 todo list가 유지되도록 하기
+  todoListElement.innerHTML = "";
+  getTodoList().forEach((todo) => {
+    createTodoElement(todo);
+  });
+};
+
+const todoInputElement = document.getElementById("todo-input");
+const todoInputButton = document.getElementById("input-btn");
+const todoListElement = document.getElementById("todo-list");
+const doneListElement = document.getElementById("done-list");
+
+// input 버튼 클릭 시
+todoInputButton.addEventListener("click", () => {
+  if (todoInputElement.value === "") {
+    //입력값이 없을 때
+    alert("한 글자 이상 입력해주세요!");
+    return;
+  }
+
+  const newTodo = {
+    content: todoInputElement.value,
+    complete: false,
+  };
+
+  setTodoList(newTodo); //local storage에 저장
+  createTodoElement(newTodo); //새로운 todo element를 화면에 출력
+  todoInputElement.value = ""; // input value 초기화
+});
+
+// local storage에 저장된 값을 배열로 불러오기
+function getTodoList() {
+  const todoList = localStorage.getItem("todoList");
+  return todoList ? JSON.parse(todoList) : [];
+}
+
+// local storage에 todo list 저장하기
+function setTodoList(todo) {
+  let newTodoList = getTodoList();
+  //todo done 여부 확인
+  for (let i = 0; i < newTodoList.length; i++) {
+    if (
+      newTodoList[i].content === todo.content &&
+      newTodoList[i].complete !== todo.complete
+    ) {
+      newTodoList.splice(i, 1);
+      break;
+    }
+  }
+  newTodoList.push(todo);
+  localStorage.setItem("todoList", JSON.stringify(newTodoList));
+}
+
+// todo element 생성
+function createTodoElement(todo) {
+  const newLi = document.createElement("li");
+  const newDoneBtn = document.createElement("button");
+  const newSpan = document.createElement("span");
+  const newDeleteBtn = document.createElement("button");
+
+  newLi.appendChild(newDoneBtn);
+  newLi.appendChild(newSpan);
+  newLi.appendChild(newDeleteBtn);
+
+  newSpan.textContent = todo.content;
+
+  //완료 버튼 클릭 시
+  newDoneBtn.addEventListener("click", () => {
+    todo.complete = !todo.complete;
+    setTodoList(todo);
+    createTodoElement(todo);
+    newLi.remove();
+    updateItemCount();
+  });
+
+  //삭제 버튼 클릭 시
+  newDeleteBtn.addEventListener("click", () => {
+    const newTodoList = getTodoList();
+    const index = newTodoList.indexOf(todo);
+    newTodoList.splice(index, 1);
+    localStorage.setItem("todoList", JSON.stringify(newTodoList));
+    newLi.remove();
+    updateItemCount();
+  });
+
+  //완료 여부에 따라 todoList / doneList에 추가
+  if (todo.complete) {
+    newDoneBtn.innerText = "v";
+    doneListElement.appendChild(newLi);
+  } else {
+    newDoneBtn.innerHTML = "&nbsp;";
+    todoListElement.appendChild(newLi);
+  }
+
+  newDeleteBtn.textContent = "x";
+  updateItemCount();
+}
+
+// todo, done 개수 업데이트
+function updateItemCount() {
+  const todoNum = document.getElementById("todo-num");
+  const doneNum = document.getElementById("done-num");
+  todoNum.textContent = `📋 Todo (${
+    todoListElement.getElementsByTagName("li").length
+  })`;
+  doneNum.textContent = `👍🏻 Done (${
+    doneListElement.getElementsByTagName("li").length
+  })`;
+}
diff --git a/style.css b/style.css
@@ -1 +1,170 @@
-/* 자유롭게 디자인 해 주세요! */
+/* 자유롭게 디자인 해 주세요! */
+@font-face {
+        font-family: 'RixXladywatermelonR';
+        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/RixXladywatermelonR.woff2') format('woff2');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+html {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+body {
+    font-family: RixXladywatermelonR;
+    max-width: 500px;
+    padding: 10px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    scrollbar-width: thin;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    width: 450px;
+    height: 680px;
+    flex-direction: column;
+    background-color: #fef79fbd;
+    overflow: hidden;
+}
+
+.container::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("./grid.jpg");
+    background-size: cover;
+    background-blend-mode: darken;
+    opacity: 0.5;
+    z-index: -1;
+}
+
+header {
+    font-size: 40px;
+    font-weight: bold;
+    padding: 20px;
+    background-color: #2b3681;
+    color: white;
+    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+}
+
+form {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+label {
+    align-items: center;
+    padding: 2px 7px;
+    font-size: 20px;
+}
+
+input {
+    border-color: black;
+    border-width: 0 0 2px;
+    background-color: transparent;
+    width: 180px;
+    margin: 0;
+    font-family: RixXladywatermelonR;
+    padding-bottom: 5px;
+    color:rgb(50, 50, 50);
+}
+
+input:focus {
+    outline: none;
+    box-shadow: none;
+}
+
+button {
+    font-family: RixXladywatermelonR;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-wrap: wrap-reverse;
+}
+
+#input-btn {
+    border: transparent;
+    border-radius: 4px;
+    background-color: transparent;
+    padding: 2px 7px;
+    font-size: 25px;
+    font-weight: 500;
+}
+
+#input-btn:hover {
+    color: green;
+    background-color: transparent;
+}
+
+section {
+    margin-top: 20px;
+}
+
+h4 {
+    font-size: 20px;
+    text-align: left;
+    padding: 10px 20px;
+    margin: 0;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 168px;
+    overflow-y: scroll;
+}
+
+li {
+    display: flex;
+    align-items: center;
+    padding: 8px 30px;
+    gap: 8px;
+}
+
+li > :nth-child(1) {
+    width: 25px;
+    height: 25px;
+    border-radius: 8px;
+    background-color: transparent;
+    font-size: 25px;
+    border-color: #393939;
+}
+
+li > :nth-child(3) {
+    border: transparent;
+    background-color: transparent;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+#done-list span {
+    text-decoration: line-through;
+    color: #b3b3b3;
+}
+
+#done-list li > :nth-child(1) {
+    border: transparent;
+    background-color: green;
+    font-size: 20px;
+    font-weight: 500;
+    color: white;
+}