💻 D-day 04

이번에는 버튼을 누르면 전체 list가 삭제되는 기능을 구현하려한다. 그리고 input에 텍스트가 없어도 enter를 누르면 리스트가 만들어져서 이 부분도 수정을 같이 했다.

//init.js
let inputTest = document.querySelector(".inputText");
let TodoLists = document.querySelector("#TodoLists");

function handleClickInputBtn(e) {
  e.preventDefault();
  if (inputTest.value !== "") {
    //텍스트가 없으면 리스트가 만들어지지 않게 조건을 만들었다
    const list = new makeListClass(inputTest.value);
    TodoLists.appendChild(list.$list);
  }

  inputTest.value = "";
  inputTest.focus();
}

function allDeleteLists() {
  //모든 리스트들을 가져와서 삭제해주는 함수
  let allLists = document.querySelectorAll(".list");
  Array.from(allLists).map((item) => {
    TodoLists.removeChild(item);
  });
}

window.addEventListener("DOMContentLoaded", () => {
  inputTest.focus();
  let inputBtn = document.querySelector(".inputBtn");
  inputBtn.addEventListener("click", handleClickInputBtn);

  let form = document.querySelector("form");
  form.addEventListener("submit", handleClickInputBtn);

  let allDeleteList = document.querySelector(".claerBtn");
  allDeleteList.addEventListener("click", allDeleteLists);
});

이렇게 todoList에 추가기능, 삭제기능, 전체삭제기능을 구현했다. 이제는 이미지를 넣거나 상세리스트를 만들어서 더 효율적이고 알록달록하게 만들어지고 싶어졌다. 게임하는것을 가장 좋아하는데 꼭 게임을 하는것 같다. 이번에는 어떤 걸 만들어 볼지 고민을 해보고 또 구현을 해봐야겠다.