#7.6 Deleting To Dos part One

• Date.now() -> 밀리초를 주는 함수(1000분의 1초) ->랜덤숫자얻기에 유용

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

const TODOS_KEY = "todos";

let toDos = [];//항상 빈 array로 시작하므로 업데이트 가능한 let으로

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    console.log(li.id);
    li.remove();
}
function paintToDo(newTodo) {
    const li = document.createElement("li");
    li.id = newTodo.id;
    const span = document.createElement("span");
    span.innerText = newTodo.text;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo); //button을 클릭하면 event를 얻음
    li.appendChild(span);
    li.appendChild(button); //button은 span뒤에 있어야 함
    toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj = {
        text:newTodo,
        id: Date.now(), //각각의 li item을 구별
    }
    toDos.push(newTodoObj); //빈 array에 push
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY); //그냥 string

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);//array
    toDos = parsedToDos; //toDos를 업데이트, 이전 배열들도 복원
    parsedToDos.forEach(paintToDo);
}