todo를 추가하기

function paintToDo(newTodo) {
  console.log("i will paint", newTodo);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  //   발생한 사건을 함수의 첫번째 인자로 줌.
  const newTodo = toDoInput.value;
  //   input의 value를 비우기전의 값
  toDoInput.value = "";
  //   newTodo라는 변수와 아래의 toDoInput.value는 무관함.
  //   newTodo는 input의 현재 value를 복사한 것이고
  //   그다음 input에 뭘하든 newTodo와는 무관한 것.
  paintToDo(newTodo);
  //   newTodo에 담은 값을 호출하는 함수
}

toDoForm.addEventListener("submit", handleToDoSubmit);

이렇게 콘솔창에 출력이 된다.
newToDo 라는 변수에 input.value 의 값을 담고, 그것을 paintToDo 라는 함수에 담는것.

현재 원하는건 paintToDo가 list를 만들어주는것.

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  // 당연하지만 변수의 이름은 아무거나해도됨.

  li.appendChild(span);
  // li 안에 span을 넣어주어야하니까.
  // li에 바로 텍스트를 안넣고 span을 넣는 이유는
  // nico왈: 나중에 li에 todo를 삭제하는 버튼도 같이 넣을것이기때문
  span.innerText = newTodo;
}

// 혼자 한번 ul의 id를 변수로 만들어서 #ul아이디.appendChild(li)해보니까
// HTML에 출력이 잘 되넹 굿