todo리스트 세팅

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// = document.querySelector("#todo-form input")
const toDoList = document.getElementById("todo-list");
// 이전에 했듯 form 태그는 submit 이벤트를 가진다.
// 그렇기에 새로고침되는 현상을 막아주기 위해 아래에 preventDefault()를 추가해준다.
// submit할때마다 새로고침되면 매번 불필요하게 데이터 소모


function handleToDoSubmit(event) {
  event.preventDefault();
  //   발생한 사건을 함수의 첫번째 인자로 줌.
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  //   input에 어떤 값 입력하고 submit하면 input칸 다시 비우기위해 한거임
  
  //   newTodo라는 변수와 아래의 toDoInput.value는 무관함.
  //   newTodo는 input의 현재 value를 복사한 것이고
  //   그다음 input에 뭘하든 newTodo와는 무관한 것.
  //   이전에 기입한 텍스트를 저장해야 나중에 ul에 넣을수있으니까
  //   newTodo에 input의 value를 넣어두는 것.
}

toDoForm.addEventListener("submit", handleToDoSubmit);