[노마드코더] 바닐라 JS로 크롬 앱 만들기 #06 (to do list)

JSON.stringify () : javaScript 값이나 객체를 string(문자열)으로 만들어줌

JSON.parse() : JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성함

fliter() : 지우고 싶은 (배열)아이템을 제외함, 넣고 싶은 아이템은 반드시 true로 리턴함, filter 는 원래 array를 변경하지 않고 새 array를 생성함

// filter 예제
function abc(item) {
	return item !==3
}
[1,2,3,4,5].filter(abc);
// 결과 [1,2,4,5]

parseInt() : 문자열을 숫자로 바꿔줌

---

to do list 만들기

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

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

function saveTodos () {
  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));
  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); // append 는 제일 마지막에 적어줘야함
 li.appendChild(button);
 toDoList.appendChild(li);
}

function handleToDoSubmit (event) {
  event.preventDefault();
  const newTodo = toDoInput.value; // input의 값을 새로운 변수에 저장
  toDoInput.value =""; // 주의! 값을 비웠다고 해서 new ToDo의 값이 비워지는 건 아님!
  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);
}

 

분명 중간까지는 잘 따라갔는데... 

어디서 흐름을 놓쳐버린걸까... (흐린눈)

다시 봐야겠따...