노마더코더 크롬 앱 만들기 : todo 만들기

todo 만들기

html

<form id="todo-form">
        <input type="text" placeholder="Write a To Do and Press Enter" required />
    </form

JS

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

const TODOS_KEY = "todos";

let toDos = []; //입력시 넣어둘 공간(배열)

function saveToDos() { //setItem을 통해서 key : value 값을 스토리지에 저장
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event) { //삭제
  const li = event.target.parentElement; // 부모요소를 클릭 타켓
  li.remove(); //타켓인 된 이벤트 대상 요소 삭제
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));  //toDo.id와 li.id가 같지 않을때 toDos반환
  saveToDos(); // 저장
}

function paintToDo(newTodo) { //todo 출력
  const li = document.createElement("li");
  li.id = newTodo.id;
  const span = document.createElement("span");
  span.innerText = newTodo.text;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) { //todo 입력
  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);

const savedToDos = localStorage.getItem(TODOS_KEY);

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

배운것들

• .filter 함수는 콜백함수에 지정된 조건에 맞는 요소를 새롭게 반환