To Do List 만들기

To Do List 만들기 (JS)

 

// 페이지가 로드될 때 실행할 함수
document.addEventListener("DOMContentLoaded", function () {
  // 필요한 요소들을 DOM에서 찾아 변수에 할당
  const form = document.getElementById("write");
  const input = document.getElementById("text");
  const template = document.getElementById("list");
  const tasksContainer = document.getElementById("tasks"); // 할 일 목록을 담을 컨테이너
  //   const addButton = document.getElementById("add"); // 추가 버튼 요소

  // 추가 버튼 클릭 이벤트를 감지하여 할 일을 추가하는 함수
  form.addEventListener("submit", function (event) {
    // 폼 기본 제출 동작 방지
    event.preventDefault();

    // 입력 필드의 값을 가져오고 양 끝 공백 제거
    const inputValue = input.value.trim();

    // 입력 값이 비어 있지 않은 경우에만 처리
    if (inputValue !== "") {
      // 템플릿 요소의 복제본 생성
      const clone = template.content.cloneNode(true);

      // 복제본 내의 내용 설정
      const contentElement = clone.querySelector(".content1");
      contentElement.innerHTML = `<input type="checkbox" /> ${inputValue}`;

      // 삭제 버튼의 클릭 이벤트 처리
      const deleteButton = clone.querySelector(".delete");
      deleteButton.addEventListener("click", function () {
        // 삭제 버튼이 클릭되면 해당 복제본을 부모 요소에서 제거
        tasksContainer.removeChild(cloneContainer);
      });

      // 클론된 노드를 실제 DOM에 추가
      const cloneContainer = document.createElement("div");
      cloneContainer.appendChild(clone);
      tasksContainer.appendChild(cloneContainer);

      // 입력 필드 초기화
      input.value = "";
    }
  });
});

 

이미 `.box3`에서 묶고 있는 걸

굳이 새로 `div`를 생성해야 되나 싶어서 만든..

 

새 코드

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("write"); // 폼 요소 선택
  const input = document.getElementById("text"); // 입력 필드 요소 선택
  const template = document.getElementById("list"); // 템플릿 요소 선택
  const tasksContainer = document.getElementById("tasks"); // 할 일 목록을 담을 컨테이너 요소 선택
  const addButton = document.getElementById("add"); // 추가 버튼 요소 선택

  addButton.addEventListener("click", function (event) {
    event.preventDefault(); // 폼의 기본 제출 동작 방지

    const inputValue = input.value.trim(); // 입력 필드의 값 가져오기

    if (inputValue !== "") {
      const clone = document.importNode(template.content, true); // 템플릿 요소의 복제본 생성

      const contentElement = clone.querySelector(".content1");
      contentElement.innerHTML = `<input type="checkbox" /> ${inputValue}`; // 복제본 내의 내용 설정

      const deleteButton = clone.querySelector(".delete");

      const noteElement = clone.querySelector(".note"); // .note 요소를 선택
      tasksContainer.appendChild(noteElement); // 할 일 목록에 복제본 추가

      deleteButton.addEventListener("click", function () {
        tasksContainer.removeChild(noteElement); // 삭제 버튼 클릭 시 해당 복제본 제거
      });

      input.value = ""; // 입력 필드 초기화
    }
  });
});

 

 

 

.. 아우 힘들어