Todo-list 만들기 1차

쉬운 목차

프로젝트 개요

javascript를 연습하기 위해 가장 기본적인 CRUD로 todo list를 구현하기로 했습니다.
개발 기간은 일주일 정도밖에 안됐지만 퇴근 후 자유시간에 했기 때문에 그리 오래 걸리지는 않았습니다. HTML과 CSS는 앞서 만든 todo list에서 가져와서 기능적인 면에 중점을 두었습니다.

프로젝트 결과

기능 개발

입력 창에 텍스트를 입력하면 목록에 흩어집니다.
+ 버튼을 누르면 입력한 텍스트가 목록에 흩어집니다.
아무 것도 입력하지 않으면 경고창에 “텍스트를 입력하세요”라는 창이 뜹니다.
휴지통 버튼을 클릭하면 항목이 삭제됩니다.

프로젝트 흐름

코드 리뷰

const footer__input = document.querySelector(".footer__input");
const footer__button = document.querySelector(".footer__button");
const new__form = document.querySelector(".new-form");
const items = document.querySelector(".items");

new__form.addEventListener("submit", event => {
  event.preventDefault();
  createList();
});

function createList() {
  // 입력값 받기
  let text = footer__input.value;

  if (!text) {
    alert("텍스트를 입력해주십시요.");
    footer__input.focus();
    return;
  }

  // li(item) 생성
  const item = createItem(text);
  items.appendChild(item);

  footer__input.value = "";
}

let id = 0;

function createItem(text) {
  const item__row = document.createElement("li");
  item__row.setAttribute("class", "item__row");
  item__row.setAttribute("data-id", id);
  item__row.innerHTML = `
    <div class="item">
    <span class="item__name">${text}</span>
    <button class="item__delete">
      <i class="fa-solid fa-trash-can" data-id="${id}"></i>
    </button>
  </div>
  <div class="item__divider"></div>
  `;
  id++;
  return item__row;
}

items.addEventListener("click", event => {
  let id = event.target.dataset.id;
  if (id) {
    let del_item = document.querySelector(`.item__row(data-id="${id}")`);
    del_item.remove();
  }
});

코드를 간략히 설명하자면 다음과 같습니다.

Form 태그에 Submit 이벤트 리스너를 New-Form 클래스에 등록하여 입력 시 새 항목을 생성하는 createList() 함수 실행 → 텍스트를 createList()의 값으로 받아 텍스트가 없으면 경고창을 띄우고 항목 생성 createItem() 함수 실행 → createItem()에서 해당 item__row 클래스로 li 태그를 생성하고 innerHTML로 삽입 → 이벤트 리스너를 등록하고 항목을 클릭하고 대상 레코드에 ID가 있으면 항목을 삭제합니다.

'추천 관련글,