7.0 Setup

강의

투두리스트를 만들기 위해 우리는 form이 필요하다. 사용자가 todo를 입력해야만 하고, list도 필요하기 때문이다. 사용자가 todo를 나열할 수 있어야 하기 때문이다.

    <form id="todo-form">
      <input type="text" placeholder="Write a To Do and Press Enter" required />
    </form>
    <ul id="todo-list"></ul>

li 태그는 작성하지 않는다. 왜? JS를 통해서 추가해줄거니까!!! ( •̀ ω •́ )✧

순서

1 ) form은 submit이벤트를 가지고, 함수를 만들어 우선 이벤트의 기본 동작을 막을거다.
왜냐? submit의 기본 동작은 페이지를 새로고침하는 것이고, 그건 우리가 원하는 것이 아니다.

2 ) 다음 우리는 input의 value를 얻어내고 싶다. ( 할 일을 입력한 것 )

3 ) 값을 얻었으면, 엔터를 누를 때마다 입력한 것을 비우고 싶다.
---> toDoInput.value에 빈값을 넣어주면 된다!!
와 개신박하다. 나는 상상도 못했음....

4 ) 당연히 값을 비우기 전에 그 값은 ls에 저장해야한다!!

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
}
toDoForm.addEventListener("submit",handleToDoSubmit);