[1주차] 신동현 미션 제출합니다

index.html

@@ -14,19 +14,19 @@
           <div class = "round Yellow" ></div>
           <div class = "round Green " ></div>
       </div>
-      <h1>Todo List</h1>
+      <h1> ✏️ Todo List </h1>
       <div class ="todoInput">
         <input type = "text"  id="inputTodo" placeholder="📍 Enter your to-do">
-        <button class ="addBtn"> + </button>
+        <div class ="addBtn"> ➕ </div>
       </div>
 
       <div class = "todoContainer">
-        <h2>List To Do</h2>
+        <h2>List To Do : <span id="todoCount">0</span></h2>
         <div id = "todoList"></div>
       </div>
 
       <div class = "doneContainer">
-        <h2>List Done</h2>  
+        <h2>List Done : <span id="doneCount">0</span> </h2>  
         <div id = "doneList"></div>
       </div>
 

script.js

@@ -1,37 +1,52 @@
 const inputTodo = document.querySelector("#inputTodo");
 const todoItems = document.querySelector("#todoList");
 const doneList = document.querySelector("#doneList");
-const doneArray = document.querySelectorAll("#doneList .todoItem");
 const addBtn = document.querySelector(".addBtn");
-const todoTextArray = [];
-const doneTextArray = [];
 
+//버튼 생성하는 함수
 function createBtn(className, text) {
   var button = document.createElement("div");
-
   button.textContent = text;
-  button.setAttribute("class", "listBtns");
   button.classList.add(className);
   return button;
 }
 
+//array 삭제 후 저장하는 함수
+function deleteData(arr, value) {
+  const index = arr.indexOf(value);
+  if (index !== -1) {
+    arr.splice(index, 1);
+  }
+}
+
+//deleteBtn을 눌렀을때
 function deleteItem() {
   var removeBtns = document.querySelectorAll(".deleteBtn");
   for (i = 0; i < removeBtns.length; i++) {
     removeBtns[i].addEventListener("click", function () {
-      if (this.parentNode)
+      if (this.parentNode) {
         this.parentNode.parentNode.removeChild(this.parentNode);
+        var del = this.parentNode.firstChild.textContent;
+
+        if (todoArr.includes(del))
+          deleteData(todoArr, this.parentNode.firstChild.textContent);
+        else deleteData(doneArr, this.parentNode.firstChild.textContent);
+      }
     });
   }
 }
 
+//doneBtn을 눌렀을때
 function todoToDone() {
   var doneBtns = document.querySelectorAll(".doneBtn");
 
   for (var i = 0; i < doneBtns.length; i++) {
     doneBtns[i].addEventListener("click", function () {
-      if (this.parentNode.parentNode)
+      if (this.parentNode.parentNode === todoItems) {
         doneList.insertBefore(this.parentNode, doneList.childNodes[0]);
+        deleteData(todoArr, this.parentNode.firstChild.textContent);
+        doneArr.push(this.parentNode.firstChild.textContent);
+      }
     });
   }
 }
@@ -45,9 +60,10 @@ function newTodo() {
   newDiv.appendChild(doneBtn);
   newDiv.appendChild(deleteBtn);
   newDiv.setAttribute("class", "todoItem");
-
   todoItems.insertBefore(newDiv, todoItems.childNodes[0]);
+  todoArr.push(inputTodo.value); // todoArr 에 값 저장해줌
   inputTodo.value = "";
+
   //deleteBtn 누르면 삭제 구현
   deleteItem();
 

style.css

@@ -20,6 +20,7 @@ body{
   background-color: #f0f0f0;
   margin: 10px;
   height: 200px; 
+  border-radius: 10px;
 }
 .header{
     height: 15px;
@@ -38,18 +39,16 @@ body{
 .Red {
     background-color: #F5655B;
 }
-
-.round.Yellow {
+.Yellow {
     background-color: #F6BD3B;
 }
 
 .Green {
     background-color: #43C645;
 }
 
-.todo_input{
+.todoInput  {
     width:100%;
-    background-color: whitesmoke;
     height: 60px;
     display: flex;
     align-items: center;