Momentom 앱만들기의 꽃 todo리스트 추가, 삭제하기이다.

로컬스토리지에 있는 데이터를 잘 다루어야 구현할 수 있는 기능이다.

const toDoForm = document.querySelector("#todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector("#todo-list");

const TODOS_KEY = "todos";

일단 할일을 적을 입력창, 리스트, 입력 폼을 가져온다.

또한 자주 사용하게 될 문자열인 “todos”를 const 변수로 할당하여 오타로 인한 에러를 방지해준다.

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

입력된 할일을 로컬스토리지에 저장하는 함수를 만든다. 키는 “todos”, 값은 입력된 할일로 설정하고 객체 형식으로 저장된 값을 Json.stringify메서드로 문자열로 형식으로 만들어 저장한다.

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
  saveToDos()
}

할일 리스트를 삭제하는 함수도 만들어준다. 변수 li로 삭제하는 엘리먼트를 지정해준 후 remove메서드를 이용해 삭제한다. 그리고 할일목록을 재로딩하기 위해 saveToDos함수를 실행시킨다.

function paintToDo(newToDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.textContent = newToDo.text;
  li.id = newToDo.id;
  const button = document.createElement("button");
  button.textContent = "❌";
  button.addEventListener("click", deleteToDo);
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

할일 리스트를 html에 붙여주는 함수를 만든다.

function handleToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  toDoInput.value = "";
  const newTodoObj = {
    text: newToDo,
    id: Date.now(),
  };
  toDos.push(newTodoObj);
  paintToDo(newTodoObj);
  saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);

등록 버튼을 누르면 할일이 toDos배열에 입력된 값을 저장하는 이벤트 핸들러 함수를 만들고 이벤트 리스너를 추가한다.


const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
  const parseToDos = JSON.parse(savedToDos);
  toDos = parseToDos;
  parseToDos.forEach(paintToDo);
}

체크리스트