10. To Do List (Adding ToDos)

- HTML -

시계의 위치를 위로 옮기고

To Do form을 만들어줌.

form 안의 ul 안에 li로 작성되는 to do를 받을 것이지만

li은 js파일에서 만들 것임.

새로 만든 js 파일도 연결해둠.

 

 

 

- JS-

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

변수 toDoForm 에는 todo-form인 form을

변수 toDoInput에는 todo-form의 input을

변수 toDoList에는 todo-list인 ul을 저장함.

function paintToDo(newTodo) { 를 하여

paintToDo(newTodo)라는 함수를 만듬.

const li = document.createElement("li"); 를 하여

li 라는 변수에 

document.createElement("li")를 하여

li를 만듬.
const span = document.createElement("span"); 를 하여

span 이라는 변수에

document.createElement("span") 를 하여

span을 만듬.
li.appendChild(span); 를 하여

li에 span를 추가해줌.
span.innerText = newTodo; 를 하여

span의 innerText에 newTodo인 toDoInput의 value를 넣어줌.
toDoList.appendChild(li); 를 하여

toDoList인 ul에 li를 추가해줌.
}

function handleToDoSubmit(event) { 를 하여

handleToDoSubmit(event) 라는 함수를 만듬.
event.preventDefault(); 를 하여

enter 나 버튼 클릭 시 sudmit 되는 기본 설정을 막아줌.
const newTodo = toDoInput.value; 를 하여

newTodo라는 변수에 toDoInput의 value를 저장함.
toDoInput.value = ""; 를 하여

to do를 작성 후 enter를 누르면 toDoInput의 value를 빈칸으로 만들어줌.
paintToDo(newTodo); 를 하여

작성한 to do를 li에 넣어주는 paintToDo(newTodo) 함수를 실행함.
}

toDoForm.addEventListener("submit", handleToDoSubmit); 를 하여

toDoForm을 submit하면 to do 작성하고 enter를 누르면 toDoInput의 value를 빈칸으로 만들어주고

작성한 to do를 li에 넣어주는 paintToDo(newTodo) 함수를 실행하는 handleToDoSubmit 함수를 실행함.

 

 

 

- 화면 -

 

To Do를 적는 칸이 생김