#7.3 Saving To Dos

• 브라우저에 저장하려면 localStorage 필요
•  localStorage는 오직 텍스트만 저장 가능
• JSON.stringify : 오브젝트이든 배열이든 string으로 만들어줌  

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const toDos = [];

function saveToDos(){
    localStorage.setItem("todos",JSON.stringify(toDos)); //배열을 문자열로 만들어줌
}

function deleteToDo(event){
    const li = event.target.parentElement;//target:클릭된 html element(button), parentElement-Element의 부모
    li.remove();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo); //button을 클릭하면 event를 얻음
    li.appendChild(span);
    li.appendChild(button); //button은 span뒤에 있어야 함
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function toDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveToDos(); 
}

toDoForm.addEventListener("submit",toDoSubmit);