[JavaScript] todo list 만들기

form 은 submit 이벤트를 기본적으로 가진다.

이벤트 리스너 함수가 기본적으로 인자만 제공해주면 이벤트에 대한 정보를 담아 주기 때문에 

event 라는 인자를 하나 두어 정보를 받아와 주자.

그러면 event 안에는 이 event 가 submit 이라는 정보 등 다양한 정보가 담겨있다.

(JavaScript 에서 기본으로 이런 엄청난 기능을 제공한다.)

 

그 중 event.preventDefault() 를 해주면 submit 의 경우 reload(새로고침) 과 같은 default 동작을 못하게 할 수 있다.

 

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

const TODOS_KEY = "todos";

let toDos = [];

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

function checkItem(event) {}

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

}

function paintToDo(newTodo) {
  const li = document.createElement("li");
  li.id = newTodo.id;
  const span = document.createElement("span");
  span.innerText = newTodo.text;
  const button = document.createElement("button");
  li.appendChild(span);
  li.appendChild(button);
  button.addEventListener("click", deleteToDo);
  button.innerText = "X?";
  todoList.appendChild(li);

}

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

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

}

todoForm.addEventListener("submit", handleToDoSubmit);