DAY 13

 

 

7.6 ~ 7.8 TO DO LIST

 

#7.6 Deleting To Dos part One

 

저번 코드에서 삭제 기능은 잘 실행됐으나, 문제는 같은 이름의 항목이 있을 때다.

 

 

  다음과 같이 '나루토 보기'가 두개가 있을 때, 나루토 보기 둘 중 하나를 삭제했을 때 어떤 것을 삭제했는지 모른다. 때문에 array의 각 item에 id를 부여해 고유성을 갖게할 것인데, 이 고유성은 Date.now() 함수로 부여할 것이다. 

  Date.now()는 밀리초(1000/1초)를 주는 함수로, 이를 각 item에게 고유한 아이디 값으로 부여할 것이다. 

 

handleToDoSubmit 

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

 

그리고 paintToDo 함수에는 이제 text가 아닌 object가 삽입되므로 newToDoObj 라는 오브젝트 안의 text만 span 태그안에 넣어줘야 한다. 

 

function paintToDo(newTodo) {
  const li = document.createElement("li");
  // 각 li에 처음에 Date.now()로 부여한 id 값을 속성으로 추가한다.
  li.id = newTodo.id;
  const span = document.createElement("span");
  // 이제 newToDoObj라는 오브젝트를 전달하므로 그 중 text를 전달한다.
  // 여기서의 newTodo는 단지 함수의 인자이므로 헷갈리지 말것.
  span.innerText = newTodo.text;
  const button = document.createElement("button");
  button.innerText = "❌";
  
  button.addEventListener("click", deleteToDo);
  
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

 

이제 데이터를 추가하면 id 값을 li 태그의 property로 추가한다!

 

 

 

#7.7 Deleting To Dos part Two  

 

  forEach처럼 array의 각 인덱스들에게 하나의 동작을 실행시키는 filter 함수는, array에서 item을 지우는 것이 아닌 제외하는 것이다.

  기존의 array에서 제외한 item을 뺀 나머지 items가 있는 새 array를 만드는 것이다. 즉 선택옵션으로 보면 된다.

  

  아래의 예시는 boolean을 이용한 함수 foodFilter를 만들어서, !== (not)을 활용해 삭제하고 싶은 item 외의 나머지 items를 return시킨다. 

const arr = ["pizza", "chicken", "udon", "frenchFries", "pasta"];

function foodFilter(food){
	return food !== "frenchFries";
}

console.log(arr.filter(foodFilter));

 

 

 

#7.8 Deleting To Dos part Three 

 

위의 filter 함수를 이용해 deleteToDo 함수를 이렇게 변경할 수 있다.

 

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

 

filter()는 forEach()처럼 모든 인덱스에 한해서 한 번씩 실행시키고 지나간다고 했다.

때문에 id가 내가 클릭한 버튼의 아이디가 아닌 다른 모든 값을 전부 toDos 안에 넣는 것이다.

그리고 id의 값은 Date.now()로 받아온 number 값이므로 결국 string 값으로 변환되게 되는 savedToDos의 index와는 다를 것이다. 때문에 parseInt로 클릭한 id 값을 int로 바꿔준다.

그리고 마지막으로 그 상태의 toDos를 localStorage에 저장하면 끝이다!

 

 

---

 

 

todo.js

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

const TODOS_KEY = "todos";
let toDos = [];

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

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

// toDos UI
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);
}

// toDos handle
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);

// localStorage에 저장된 값을 얻어와 savedToDos에 저장
const savedToDos = localStorage.getItem(TODOS_KEY);

// savedToDos가 비어있지 않다면
if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintToDo);
}