[Nomad/바닐라 JS Challenges] 10일차 | Ch07 TO DO LIST

참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby

 

0-8.  Setup & Adding To Dos & Deleting To Dos & Saving To Dos

---

index.html

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

👉🏻todo를 적을 form과 todo list를 나타낼 ul tag를 추가한다.

 

todo.js

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

👉🏻먼저 각 요소들을 변수로 정의해준다.

let toDos = [];
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);

👉🏻먼저 form에 submit event를 부여하는데 이 때 handleTodoSubmit 함수를 실행시킨다.

👉🏻현재 시간을 id로, todo의 값을 text로 구성한 객체를 만들어 toDos 리스트에 넣는다. 그리고 paintToDo 함수에 객체를 넣어 실행하고 saveToDos 함수를 실행한다.

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");
    button.innerText = "❌";

    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

const TODOS_KEY = "todos";
function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

👉🏻painToDo함수는 newTodo라는 인자로 to do 객체를 받는다. 해당 객체의 내용으로 toDoList에 element를 만들어 넣는다. ❌ 버튼에는 deleteToDo 함수를 click event로 부여한다.

👉🏻saveToDos함수는 localStorage에 to to 내용을 저장한다. 이 때 json형태인 to do 객체를 문자열로 변환해서 저장한다.

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();

    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    saveToDos();
}

👉🏻deleteToDo함수는 삭제하려는 element를 삭제해준다. 그리고 filter를 이용해 삭제하려는 요소를 toDos 리스트에서 제거해준다.

📌filter: list에 사용할 수 있는 메서드로 주어진 조건에 해당하는 요소들을 모아 새로운 리스트로 반환해준다.

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

👉🏻새로고침해도 이전에 등록했던 to do list가 날아가지 않도록 localStorage에서 요소를 가져와 to do list를 등록해준다.