#7.0

Setup

이제 ToDo List를 기능을 추가할 것이다. 먼저 코딩하기에 앞서 그 구현하고자 하는 기능이 어떠한 구조나 모양으로 설계할 것인지 생각해야한다. ToDo List는 텍스트를 입력하면 List에 추가되는 구조를 가질 것이며 다음과 같이 HTML에 코드를 추가한다.

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

여기서 ToDo List의 내용을 표현하기위애 ul tag아래에 li tag가 있어야하지만 추가하지 않는 이유는 li를 #6 QUOTES AND BACKGROUND에서 했던 JS에서 tag를 생성하고 HTML에 추가하는 구조로 설계하기 위함이다.

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;
  toDoInput.value = "";
}

toDoForm.addEventListener("submit", handleToDoSubmit);

위 코드는 ToDo 입력창에 할일을 적고 submit을 하면 Input창의 내용을 지우는 코드이다.

#7.1

Adding ToDos

위 코드를 다음과 같이 추가하여 ToDo List에 목록을 추가하는 기능을 더했다.

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

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

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

toDoForm.addEventListener("submit", handleToDoSubmit);

paintToDog함수는 JS에서 HTML tag을 만들어 ul tag에 요소(element)를 추가하는 코드이다. 코드를 실행하면 paintToDog함수를 통해 ul에 tag가 추가되는걸 확인할 수 있는데 li>span을 하는 이유는 li안에 더 다양한 기능을 넣기 위해 li tag 안에 span을 추가한 것이다.

#7.2

Deleting To Dos

이제 할일 목록을 삭제하는 버튼을 다음과 같이 구현한다.

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

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

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerHTML = newTodo;
  const button = document.createElement("button");
  button.innerHTML = "🟩";
  button.addEventListener("click", deleteToDo);

  li.appendChild(button);
  li.appendChild(span);
  toDoList.appendChild(li);
}

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

toDoForm.addEventListener("submit", handleToDoSubmit);

paintToDo함수에 button 변수와 addEventListener함수가 추가되었다. deleteToDo함수를 다음과 같이 정의 하고 여러개의 할일 목록을 생성하여 버튼을 눌러본다.

function deleteToDo() {
  console.log("click buttion");
}

내용이 같은 할일 목록을 만들었다.