💻 D-day 04

바로 리스트를 프린트해보기로 했다.코드를 적기전에 내가 구현하고 싶은 기능을 생각해보았다.

• 페이지가 load되었을때 input창에 focus가 되었으면 좋겠다

• 버튼을 누르거나 enter키를 눌러도 list가 만들어지면 좋겠다

• list가 만들어지면 input창이 비었으면 좋겠다

• list가 만들어지면 다시 input창에 focus가 되었으면 좋겠다

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

function handleClickInputBtn(e) {
  //form은 enter를 누르면 reset되도록 기본값으로 지정되어 있어서 막아주는 코드를 구현
  e.preventDefault();
  const list = new makeListClass(inputTest.value);
  TodoLists.appendChild(list.$list);
  inputTest.value = "";
  inputTest.focus();
}

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

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

처음에는 버튼에만 event를 넣었다. 그랬더니 enter키를 누르면 reset이 되고 preventDefault코드가 기능을 하지 않았다. 알아보니 form의 기능이니 form에 event를 구현해야한다고 해서 아래쪽에 form에도 연결을 해줬다.

위의 이미지가 기능이 구현된 모습이다.