🗓 진행일: 3월 19일
📎 7.5 ~ 7.7

원래 8.0까지 들었어야 했는데 듣기 싫었고...

7.5 Loading To Dos part Two

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

function saveToDos() { // 저장 중,,
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); // 배열을 stringify로 저장해서 배열 형태로
}

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

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo );
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (saveToDos) { // savedToDos !== null
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

7.6 Deleting To Dos part One

투두를 지울 때, 보이는 데에선 지울 수 있어도 localStorage에는 안 지워져

근데 지울 때 내용이 동일하면 어떤 것을 지워야 할지 모르겠어

그래서 투두들에게 id 같은 것을 쥐어줄 거야

뭐냐면 Date.now() ㅋㅋㅋ 이걸 li에 id로 쥐어주고, 그걸로 찾아오려고~

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

function saveToDos() { // 저장 중,,
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); // 배열을 stringify로 저장해서 배열 형태로
}

function deleteToDo(event) { 
    const li = event.target.parentElement;
    console.log(li.id);
    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");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo );
    li.appendChild(span);
    li.appendChild(button);
    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();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (saveToDos) { // savedToDos !== null
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

7.7 Deleting To Dos part Two

지울 때 빼고 싶은 item을 제외한 새로운 array를 만들어서 사용하는 방식이래

filter를 배웠습니다

(배열).filter(함수) 를 실행해서, forEach처럼 각 item을 함수로 보내주고 결과가 true인 애들로만 배열을 재구성해서 리턴