nomard crome app 6

todo-list

form

HTML

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

JS

const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");
const toDoInput = toDoForm.querySelector("input");
// const toDoInput = document.querySelector("#todo-form input"); 와 같다.

---

handleToDoSubmit

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value; // value를 미리 저장
  toDoInput.value = ""; // 그리고 toDoInput에서 없앤다.
}

toDoForm.addEventListener("submit", handleToDoSubmit);

ToDo를 만들기 위한 기초 코드 html을 js로 가져왔고 TodoSumit이 작동하는 코드

---

paintToDo

새로운 todo를 추가할 때 필요한 코드

function paintToDo(newTodo) {
  const li = document.createElement("li");
}

li 안에 span을 넣으면 todo를 삭제하는 buttom까지 만들 수 있게된다

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  li.appendChild(span);
  span.innerText = newTodo;
  toDoList.appendChild(li);
}

html의 element인 li를 js에서 만들고 span도 마찬가지 li 안에 span을 포함하고 span안에 newTodo를 담는다 js에서 toDoList, 즉 html의 “todo-list”에 li를 담는다.

paintToDo 함수 작성후 submit 함수에 삽입

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  paintToDo(newTodo);
}

---

문제 1 삭제버튼 없음
문제 2 새로고침하면 없어짐

button

<button>x</button>

x버튼 만드는 방법

클릭 이벤트를 추가해야 한다.

---

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);
}

클릭 이벤트를 추가한 paintToDo
deleteTodo function을 추가해야한다.

li안에 button을 추가하고 평범한 click event를 추가해도 button의 타겟이 정의 되지 않았기 때문에 제대로 작동하지 않는다 따라서

deleteToDo

target

function deleteToDo(event) {
  console.dir(event.target);
}

코드로 버튼의 타겟을 확인한 뒤 click event function을 작성한다.

console.dir(event.target);에서 parentNote 혹은 parentElement를 확인한다.

따라서

function deleteToDo(event) {
  console.dir(event.target.parentElement.innerText);
}

를 실행한 뒤 toDoInput.value에 a b c를 각각 입력하고 버튼을 클릭하면
aX
bX
cX
각각 다른 결과를 얻고 무엇이 클릭되었는지 확인할 수 있다.

target은 HTML element이고 HTML element은 하나 이상의 property를 가지고 있다. parentElement는 클릭된 element의 부모를 나타낸다. 우리가 작성한 코드에서 button의 부모는 li인것을 확인할 수 있다.

---

function deleteToDo(event) { const li = event.target.parentElement; li.remove(); }

따라서 해당 button의 부모를 타겟해준 뒤 remove해주면 삭제가 가능하다.