[바닐라JS] Todo List 만들기 - DOM 자바스크립트 예제

 

 

 

JS 코드 

To-Do 항목 배열 및 다음 항목 번호 설정

const itemList = [
  { no: 1, todo: "두부", done: false },
  { no: 2, todo: "계란", done: false },
  { no: 3, todo: "라면", done: false },
];

let nextNo = itemList.length + 1;

 

itemList

To-Do 항목들을 객체 형태로 가진 배열.

no (고유 번호), todo (할 일 내용), done (완료 여부) 속성.

nextNo

새로운 To-Do 항목을 추가할 때 사용될 다음 항목 번호.

 

 

 

---

 

 

To-Do 항목 렌더링 함수

function renderTodoItem({ no, todo, done = false }) {
  // 새로운 <li> 요소 생성
  const liNode = document.createElement("li");
  liNode.setAttribute("data-key", no); // 항목 번호를 data-key 속성으로 설정

  // 번호를 보여주는 <span> 요소 생성
  const noSpanNode = document.createElement("span");
  const noTextNode = document.createTextNode(no); // 항목 번호의 텍스트 생성
  noSpanNode.appendChild(noTextNode); // <span> 요소에 텍스트 추가

  // 할 일 내용을 보여주는 <span> 요소 생성
  const todoSpanNode = document.createElement("span");
  const todoTextNode = document.createTextNode(todo); // 할 일 내용의 텍스트 생성
  todoSpanNode.appendChild(todoTextNode); // <span> 요소에 텍스트 추가

  // 만약 항목이 완료되었다면, 할 일 내용에 취소선 스타일 적용
  if (done) {
    todoSpanNode.style.textDecoration = "line-through";
  }

  // 할 일 내용 <span> 요소에 클릭 이벤트 리스너 추가
  todoSpanNode.setAttribute("onclick", "toggleDone(event)");

  // '삭제' 버튼을 보여주는 <span> 요소 생성
  const deleteSpanNode = document.createElement("span");
  const deleteTextNode = document.createTextNode("삭제"); // '삭제' 텍스트 생성
  deleteSpanNode.appendChild(deleteTextNode); // <span> 요소에 텍스트 추가

  // '삭제' 버튼 <span> 요소에 클릭 이벤트 리스너 추가
  deleteSpanNode.setAttribute("onclick", "deleteItem(event)");

  // 각각의 <span> 요소를 <li> 요소에 추가
  liNode.appendChild(noSpanNode);
  liNode.appendChild(todoSpanNode);
  liNode.appendChild(deleteSpanNode);

  // 생성한 <li> 요소 반환
  return liNode;
}

 

renderTodoItem

- 객체로부터 받은 no, todo, done 정보를 사용하여 To-Do 항목을 렌더링하는 역할.

- 각각의 요소(<span>)는 번호, 할 일 내용, '삭제' 버튼을 나타냄,

- 만약 항목이 완료되었다면 할 일 내용에는 취소선 스타일이 적용.

- 할 일 내용과 '삭제' 버튼은 클릭 이벤트를 처리할 수 있도록 설정.

 

 

 

 

---

 

To-Do 항목 렌더링 및 초기화

const ulNode = document.querySelector("#list ul");

itemList.forEach((item) => {
  let liNode = renderTodoItem(item);
  ulNode.appendChild(liNode);
});

 

ulNode

HTML에서 To-Do 항목 리스트를 감싸는 ul 요소.

forEach

itemList 배열의 각 항목에 대해 renderTodoItem 함수를 호출, To-Do 항목을 렌더링하고 ulNode에 추가.

반응형

 

---

 

To-Do 항목 추가 함수

function addItem() {
  const inputElement = document.querySelector("#todoinput input");
  const item = {
    no: nextNo,
    todo: inputElement.value,
    done: false,
  };

  itemList.push(item);

  let liNode = renderTodoItem(item);
  ulNode.appendChild(liNode);

  inputElement.value = "";
  nextNo++;
}

 

addItem

- 사용자 입력을 통해 새로운 To-Do 항목을 추가하는 함수.

- 입력된 내용을 객체로 생성하여 itemList 배열에 추가하고,

- renderTodoItem 함수로 항목을 렌더링하고 ulNode에 추가.

 

 

 

---

 

To-Do 항목 삭제 함수

function deleteItem(event) {
  const no = Number(event.target.parentNode.dataset.key);
  const index = itemList.findIndex((item) => item.no === no);

  itemList.splice(index, 1);

  const liNode = event.target.parentNode;
  liNode.remove();
}

 

deleteItem

- 사용자가 '삭제' 버튼을 클릭하면 해당 To-Do 항목을 삭제하는 함수.

- 클릭한 버튼의 부모 요소의 data-key 속성을 통해 항목 번호를 찾아 itemList에서 해당 항목을 삭제, 화면에서도 삭제.

 

 

 

 

---

 

To-Do 항목 완료 여부 토글 함수

function toggleDone(event) {
  const no = Number(event.target.parentNode.dataset.key);
  const index = itemList.findIndex((item) => item.no === no);

  const item = itemList[index];
  item.done = !item.done;

  event.target.style.textDecoration = item.done ? "line-through" : "none";
}

 

toggleDone

- 사용자가 To-Do 항목을 클릭하면 해당 항목의 완료 여부를 토글하는 함수.

- 클릭한 요소의 부모 요소의 data-key 속성을 통해 항목 번호를 찾아 해당 항목의 done 속성을 변경,

- 완료 여부에 따라 텍스트 스타일을 조정(삼항 연산자)