#7 [2021 UPDATE] TO DO LIST

#7.0 Setup 

const todoFrom = document.getElementById("todo-form");
const todoList = document.getElementById("todo-list");

function todoSubmit(event){
    event.preventDefault();
    const todoList = document.getElementById("todo-list");
    const todo = document.querySelector("#todo-form input").value;

    todoList.innerHTML += "<li>"+todo+" <span>[x]</span> </li>";
    document.querySelector("#todo-form input").value = "";
}

todoFrom.addEventListener("submit", todoSubmit);

 

localStorage에는 string만 저장할 수 있다는 점
그럼 과연 배열을 어떻게 저장해서 꺼내야할까?

 

forEach() 메서드
배열의 길이만큼 실행시켜준다.

화살표 함수

function test(){
    if(localStorage.getItem("todos") !== null){
       const parseTodos = JSON.parse(localStorage.getItem("todos"));
       parseTodos.forEach((parseTodos) => console.log("sayHi"));
    }
}

 

const todoFrom = document.getElementById("todo-form");
const todoList = document.getElementById("todo-list");

//form input 내용을 submit(enter) 했을 때
todoFrom.addEventListener("submit", todoSubmit);

function todoSubmit(event) {
  event.preventDefault();
  const todo = document.querySelector("#todo-form input").value;

  addTodo(todo);
  // todoList.innerHTML += "<li>"+todo+" <span>[x]</span> </li>";
}

function addTodo(todo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  const button = document.createElement("button");
  span.innerText = todo;
  button.innerText = "❌";
  button.addEventListener("click", deleteTodo);
  li.appendChild(span);
  li.appendChild(button);
  todoList.appendChild(li);

  document.querySelector("#todo-form input").value = "";

  updateTodoList();
}

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

  updateTodoList();
}

//localStorage에 todoList 저장하기
//브라우저 실행시마다 localStorage에 있는 todoList 불러오기
//todo 삭제 또는 todo 추가할 때마다 실행할 function
function updateTodoList() {
  const todos = [];

  const todoList = document.getElementById("todo-list");
  const todoListCount = todoList.childElementCount;
  const todoResult = document.querySelectorAll("#todo-list li span");

  for (let i = 0; i < todoListCount; i++) {
    todos.push(todoResult[i].innerText);
  }

  saveInStorage(JSON.stringify(todos));
}

function saveInStorage(todos) {
  localStorage.setItem("todos", todos);
}

showTodos();

function showTodos() {
  const todos = JSON.parse(localStorage.getItem("todos"));
  for (let i = 0; i < todos.length; i++) {
    addTodoElement(todos, i);
  }
}

function addTodoElement(todos, i) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  const button = document.createElement("button");
  span.innerText = todos[i];
  button.innerText = "❌";
  button.addEventListener("click", deleteTodo);
  li.appendChild(span);
  li.appendChild(button);
  todoList.appendChild(li);
}

test();

function test(){
    if(localStorage.getItem("todos") !== null){
       const parseTodos = JSON.parse(localStorage.getItem("todos"));
       parseTodos.forEach((parseTodos) => console.log("sayHi"));
    }
}

function sayHello(){
    console.log("Hellooooooo");
}

#7.5 Loading To Dos part Two

filter 함수 사용...

const arr = ["banana", "apple", "orange"];
const newArr = filter(item => item !== "banana");
//newArr 결과는 ["apple", "orange"]