바닐라 JS로 크롬 앱 만들기 [6-2] Add ToDos

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

function paintToDo(newToDo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newToDo
    toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newToDo)
}

toDoForm.addEventListener("submit", handleToDoSubmit);

투두리스트 입력 부분

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newToDo)
}

newToDo 에 입력 값을저장하기 때문에 이후에 toDoInput.value 가 사라져도 상관 없음

입력한 투두리스트 목록으로 남기기

function paintToDo(newToDo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newToDo
    toDoList.appendChild(li);

문제점 : 새로고침하면 리스트가 사라지고 완료한 리스트를 지울 수 없다.