#7.5 Loading To Dos part Two

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;//target:클릭된 html element(button), parentElement-Element의 부모
  li.remove();
}
function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newTodo;
  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 = "";
  toDos.push(newTodo); //빈 array에 push
  paintToDo(newTodo);
  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);
}

진짜 개빢친다