[JS] Todo list 만들기 230801

23일차

오른쪽의 새로운 TODO추가하기 버튼을 눌러 아래의 분홍색 박스를 추가한다.

createBtn.addEventListener("click", createNewTodo);

function createNewTodo() {
  // 새로운 아이템 객체 생성
  const item = {
    id: new Date().getTime(),
    text: "",
    complete: false,
  };

  // 배열에 처음에 새로운 아이템을 추가
  todos.unshift();

  // 요소 생성하기
  const { itemEl, inputEl } = createTodoElement(item);

  list.prepend(itemEl);
}

item이라는 박스에 들어갈 세부 요소를 만든다.

function createTodoElement(item) {
  //<div class="item"> </div>
  const itemEl = document.createElement("div");
  itemEl.classList.add("item");
  
  //<input type="checkbox">
  const checkboxEl = document.createElement("input");
  checkboxEl.type = "checkbox";
  checkboxEl.checked = item.complete;

  if (item.complete) {
    itemEl.classList.add("complete");
  }

  //<input type="text" disabled="">
  const inputEl = document.createElement("input");
  inputEl.type = "text";
  inputEl.value = item.text;
  inputEl.setAttribute("disabled", "");

  //<div class="actions">
  const actionsEl = document.createElement("div");
  actionsEl.classList.add("actions");

  //<button class="material-icons">edit</button>
  const editBtnEl = document.createElement("button");
  editBtnEl.classList.add("material-icons", "edit-btn");
  editBtnEl.innerText = "edit";

  //<button class="material-icons remove-btn">remove_circle</button>
  const removeBtnEl = document.createElement("button");
  removeBtnEl.classList.add("material-icons", "remove-btn");
  removeBtnEl.innerText = "remove_circle";

자식 요소를 부모 요소에 넣는다.

actionsEl.append(editBtnEl);
actionsEl.append(removeBtnEl);

itemEl.append(checkboxEl);
itemEl.append(inputEl);
itemEl.append(actionsEl);

return { itemEl, inputEl, editBtnEl, removeBtnEl };
}

자세히 뜯어보기

//<button class="material-icons">edit</button>
//1
const editBtnEl = document.createElement("button");
//2
editBtnEl.classList.add("material-icons", "edit-btn");
//3 
editBtnEl.innerText = "edit";

1. editBtnEl라 선언, <button>요소 만들기
2. editBtnEl의 클래스리스트에 클래스 추가하기
3. editBtnEl의 text 영역에 글 쓰기

다음 시간에 버튼 동작을 추가할 예정이다.
유투브 영상을 보고 따라했는데 동작을 하지 않는 거 보면, 제대로 된 방식이 아닌 것 같다.
내일 강의 시간에 하는 걸 보고 수정해야겠다.