To Do List

Setup

const toDoForm = document.getElementById("todo-form");
const toDoinput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event){
event.preventDefault();
const newToDo = toDoinput.value; //input의 현재 값을 새로운 변수에 저장한다./
console.log(newToDo, toDoinput.value);
toDoinput.value = "";
console.log(newToDo, toDoinput.value);
}

toDoForm.addEventListener("submit", handleToDoSubmit);



form은 submit의 기본 이벤트인 새로고침을 가진다. 이것을 막으려면 addEventListener에서 handleToDoSubmit에 보내진 정보 event(이름은 뭘로든 변경해도됨.)을 function 내부에서 불러와 event.preventDefault();를 하면 새로고침이 막아진다.

input에서 렌터를 누를때마다 비우는 방법

toDoInput.value = ""; 이런식으로 비우면 된다.

input의 값을 저장하는법.
todoinput의 value값을 변수에 저장하면 된다. const newToDo = toDoinput.value;

Adding ToDos

함수 handletodosubmit 에 함수 painttodo 함수를 넣은 것처럼(painttodo();) function 안에 function 결과 값을 불러올 수도 있다.

createelement로 html 안에 태그를 추가할 수 있다.
createelement() -> () 안에는 html 태그가 들어간다.

li.appendChild(span) -> appendChild 를 사용해서 li 안에 span 태그를 넣을 수 있다.

crateElement 와 appendChild 를 잘 사용하면 Javascript 에서 HTML에 원하는 태그를 넣어줄 수 있다.

Deletin To Dos

function deleteToDo(event) {
const li = event.target.parentElement;
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 = "X";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}