[JavaScript] 투두 리스트(Todo-List) 만들기 (2)

✅ Javascript 추가하기

const todo = document.querySelector("#todo");
const addBtn = document.querySelector("#addBtn");
const todoBox = document.querySelector("#todoBox");

todo는 input에 입력된 값을 가져오기 위한 input 태그입니다.

addBtn은 todo를 추가하기 위한 button 태그입니다.

todoBox는 todo를 추가하는 todoBox div 태그입니다.

 

addBtn.addEventListener("click", () => {
  const newTodo = document.createElement("li");
  const checkBox = document.createElement("input");
  const text = document.createElement("span");
  const rmBtn = document.createElement("button");
});

addBtn에 이벤트리스너를 추가하여 클릭할 시 함수가 실행되게 합니다.

 

함수에서는 newTodo라는 li 태그를 생성하고

checkBox는 input 태그, text는 span 태그, rmBtn은 button 태그로 생성합니다.

 

text.innerText = todo.value;

text의 값은 todo인 input 태그의 값으로 넣어줍니다.

 

checkBox.type = "checkBox";

checkBox의 타입은 checkBox로 합니다.

 

rmBtn.innerText = "x";

rmBtn의 보여지는 값은 "x"로 합니다.

 

newTodo.appendChild(checkBox);
newTodo.appendChild(text);
newTodo.appendChild(rmBtn);
todoBox.appendChild(newTodo);

newTodo인 li 태그 안에 checkBox, text, rmBtn 순으로 추가해준 뒤

todoBox 안에 newTodo를 추가합니다.

 

todo.value = "";

input 태그의 값을 비워줍니다.

 

rmBtn.addEventListener("click", (event) => {
  todoBox.removeChild(event.currentTarget.parentNode);
});

rmBtn을 클릭했을 경우 todoBox에서 현재 클릭한 todo를 삭제합니다.

 

클릭 시 발생하는 event의 현재 타겟에서 부모 노드를 찾아 지워야

button 위에 존재하는 li 태그가 삭제됩니다.

 

checkBox.addEventListener("change", () => {
  newTodo.classList.toggle("check");
});

할 일을 했다는 것을 표현하기 위한 class를 추가해줍니다.

 

checkBox를 클릭했을 경우 newTodo에 "check"라는 클래스를 추가합니다.

classList의 toggle 메소드는 없다면 추가하고, 있다면 제거하는 메소드입니다.

 

 

✏️ 최종 Javascript 코드

const todo = document.querySelector("#todo");
const addBtn = document.querySelector("#addBtn");
const todoBox = document.querySelector("#todoBox");

addBtn.addEventListener("click", () => {
  const newTodo = document.createElement("li");
  const checkBox = document.createElement("input");
  const text = document.createElement("span");
  const rmBtn = document.createElement("button");

  text.innerText = todo.value;
  checkBox.type = "checkBox";
  rmBtn.innerText = "x";

  newTodo.appendChild(checkBox);
  newTodo.appendChild(text);
  newTodo.appendChild(rmBtn);
  todoBox.appendChild(newTodo);

  todo.value = "";

  checkBox.addEventListener("change", () => {
    newTodo.classList.toggle("check");
  });

  rmBtn.addEventListener("click", (event) => {
    todoBox.removeChild(event.currentTarget.parentNode);
  });
});

 

js 연결 후 실행 화면

 

위와 같이 "할 일 1"을 입력 후 "+" 버튼을 클릭하면 아래와 같이 li 태그가 추가되는 것을 확인할 수 있습니다.