[1주차] 이규호 미션 제출합니다.

index.html

@@ -21,14 +21,12 @@
       </div>
       <div class="todoList">
         <div class="todoCards">
-        <!--여기에 todolist 추가-->
+        <!--여기에 todo 추가-->
         </div>
-      </div>
-      <!-- <div class="todoList"> //done list로 구분 
-        <div class="todoCards">
-
+        <div class="doneCards">
+        <!--여기에 done 추가-->
         </div>
-      </div> -->
+      </div>
     </div>
   </body>
   <script src="script.js"></script>

script.js

@@ -9,7 +9,7 @@ function addTodo(){
         return;
     }
     else if(todoText.length > 60){
-        alert("80자 이하로 입력해주세요.");
+        alert("60자 이하로 입력해주세요.");
         return;
     }
     //todo card 추가
@@ -33,9 +33,62 @@ function addTodo(){
     todoCard.appendChild(todoDelete);
 
     todoCards.appendChild(todoCard);
-
+    saveTodos();
     addTodoInput.value="";
 }
+function saveTodos(){
+    const todoCards = document.querySelectorAll(".todoCard");
+    const todos = [];
+    todoCards.forEach((todoCard)=>{
+            const todoElem = todoCard.querySelector(".todoElem").textContent;
+            const isChecked = todoCard.querySelector("input[type='checkbox']").checked;
+            todos.push({text: todoElem , checked : isChecked});
+        }
+    )
+    localStorage.setItem("data",JSON.stringify(todos));
+
+}
+function loadTodos(){
+    const localTodos = localStorage.getItem("data");
+    if(localTodos){
+        const todos = JSON.parse(localTodos);
+        todos.forEach((todo)=>{
+            const todoCard = document.createElement("div");
+            todoCard.classList.add("todoCard");
+
+            const todoElem = document.createElement("div");
+            todoElem.classList.add("todoElem");
+            todoElem.textContent = todo.text;
+
+            const checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.checked = todo.checked;
+
+            const todoDelete = document.createElement("button");
+            todoDelete.classList.add("todoDelete");
+            todoDelete.textContent = "X";
+
+            todoCard.appendChild(todoElem);
+            todoCard.appendChild(checkbox);
+            todoCard.appendChild(todoDelete);
+            if(todo.checked){
+                const doneCards= document.querySelector(".doneCards");
+                doneCards.appendChild(todoCard)
+                todoCard.classList.add("checked");
+                todoElem.style.textDecoration = "line-through";
+            }    
+            else{
+                const todoCards= document.querySelector(".todoCards");
+                todoCards.appendChild(todoCard)
+                todoElem.style.textDecoration = "none";
+            }
+        })
+    }
+    else{//localStorage가 없는경우
+        const localTodos = "[]";
+        localStorage.setItem("data",localTodos);
+    }
+}
 function handleClick(event){//click 핸들러
     const clickedElement = event.target; // click event element
     if(clickedElement.classList.contains("todoDelete")){
@@ -47,27 +100,35 @@ function handleClick(event){//click 핸들러
 }
 function deleteTodo(deleteButton){//Todo 지움
     const todoCard = deleteButton.parentElement;
-    const todoCards = document.querySelector(".todoCards");
-    todoCards.removeChild(todoCard);
+    const Cards = todoCard.parentElement;
+    if(todoCard.checked){//done에서 지우기
+        // const doneCards = document.querySelector(".doneCards"); 오류 발생
+        Cards.removeChild(todoCard);
+    }
+    else{
+        // const todoCards = document.querySelector(".todoCards");
+        Cards.removeChild(todoCard);
+    }
+    saveTodos();
 }
 function handleCheckBoxClick(checkedElement){
     const todoCard = checkedElement.parentElement;
     const todoElem = todoCard.querySelector(".todoElem");
-    if(checkedElement.checked){ // checked opacity는 css
-        todoCard.classList.add("checked");
-        todoCard.style.order = "2"; //체크된 항목 아래로
+    if(checkedElement.checked){//체크되면 done으로 옮기기
+        const doneCards = document.querySelector(".doneCards");
+        todoCards.removeChild(todoCard);
+        doneCards.appendChild(todoCard);//doneCards로 붙이기
+        todoCard.classList.add("checked");//checked로 바꾸기
         todoElem.style.textDecoration= "line-through"; //취소선 긋기
     }
-    else{
+    else{//체크 풀리면 todo 으로 옮기기
+        const todoCards = document.querySelector(".todoCards");
+        doneCards.removeChild(todoCard);
+        todoCards.appendChild(todoCard);
         todoCard.classList.remove("checked");
-        todoCard.style.order = "1"; //체크되지 않은 항목 위로
         todoElem.style.textDecoration= "none";
     }
-    const todoList=Array.from(todoCards.children); // list를 통해 sort, checked와 아닌거 구분
-    todoList.sort((a,b)=> a.style.order - b.style.order);
-    todoList.forEach((todo)=>{
-        todoCards.appendChild(todo);
-    })
+    saveTodos();
 };
 //plusButton과 add Todo enter 클릭 이벤트 핸들러
 plusButton.addEventListener('click',addTodo);
@@ -76,9 +137,11 @@ addTodoInput.addEventListener("keyup", (e)=>{
         addTodo();
     }
 })
-//deleteButton 이벤트핸들러
+//deleteButton,checkbox click 이벤트핸들러
 const todoCards = document.querySelector(".todoCards");
+const doneCards = document.querySelector(".doneCards");
 todoCards.addEventListener("click",handleClick);
+doneCards.addEventListener("click",handleClick);
 // clock 출력
 function clock(){
     const date = new Date();
@@ -95,6 +158,7 @@ function clock(){
 function init(){
     clock();
     setInterval(clock,1000);
+    loadTodos();
 }
 
 init();

style.css

@@ -19,8 +19,6 @@ body{
     height: 150px;
     width: 500px;
     align-items: center;
-    /* font-weight: 700; */
-    /*flex-wrap: wrap;*/
 }
 .logo{
     font-size: 2em;
@@ -58,26 +56,25 @@ input[type=text]{/*input 태그 따로 설정*/
     border-radius: 6px;
     width: 35px;
     margin-left: 5px;
-    transition : border 0.3s;
+    transition : border 0.3s, color 0.3s;
 }
 #plusButton:hover{
     border : solid 2px #5f5f5f;
+    color : #5f5f5f;
 }
 .todoCard{
     background-color: #ECECEC;
     color : black;
-    display:flex; 
-    /*todoElem 세로축 가운데 정렬*/
+    display:flex; /*todoElem 세로축 가운데 정렬*/
     align-items:center;
-    justify-content:space-between;
-    /* item 사이 간격 균일하게 */
+    justify-content:space-between;/* item 사이 간격 균일하게 */
     height: 100px;
-    margin : 10px 0;
+    margin : 7px 0;
     border-radius: 8px;
 }
 .todoCard.checked{
+    transition : opacity 0.3s;
     opacity: 0.5;
-    transition: opacity 0.3s;
 }
 .todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/
     opacity: 0.6;