[JavaScript] Momentum App - 4.2 ToDo-List Saving to Dos

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

const toDos = [];

function saveToDos(){
    //toDos array의 내용을 local Storage에 넣는다.
    // JSON.srtingify() : JavaScript Object나 array 또는 어떤 JavaScript 코드건 간에
    // String으로 만들어 준다.
    localStorage.setItem("todos", JSON.stringify(toDos));
}

function deleteToDo(event){
    //target은 눌린 button - 부모 요소는 li -> 삭제 대상
    const li = event.target.parentElement; 
    li.remove(); // 삭제
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    // span에 텍스트 값 넣기 
    span.innerText = newTodo;
    
    const button = document.createElement("button");  
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);

    // li 안에 span, button 넣기
    li.appendChild(span); //append = 끝에 들어감
    li.appendChild(button);

    // HTML에 li 추가
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    event.preventDefault(); // window 기본동작(페이지 새로고침) 막기
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo); // 1.Array에 newToDo 집어 넣기
    paintToDo(newTodo); // 2.화면에 newToDo 그리기
    saveToDos(toDos);// 3. toDo들을 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);