[JavaScript] Momentum App - 4.2.1 ToDo-List Deleting To Dos

// localStorage에는 적용되지 않는 문제 해결

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

const TODOS_KEY = "todos"

// 시작할 때 항상 array가 빈 상태로 초기화되어 todo를 추가하면 덮어씌워지는 문제
// const -> let으로 바꿔 변경할 수 있게 한다.
let toDos = [];

function saveToDos(){
    //toDos array의 내용을 local Storage에 넣는다.
    // JSON.srtingify() : JavaScript Object나 array 또는 어떤 JavaScript 코드건 간에
    // String으로 만들어 준다.
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

/* 필터 사용
function coolFilter(item){return item !== 3}
const newArr = [1, 2, 3, 4, 5].filter(coolFilter)
// 결과 [1, 2, 4, 5] new Array를 얻는다.

//결과가 true여야 새 array에 포함된다.
//개수만큼 필터가 실행됨
coolFilter(1)
coolFilter(2)
coolFilter(3)
coolFilter(4)
*/

function deleteToDo(event){
    //target은 눌린 button - 부모 요소는 li -> 삭제 대상
    const li = event.target.parentElement; 
    li.remove(); // 삭제
    console.log(typeof li.id);
    // target의 li.id를 제외하고 배열에 넣는다.
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
    // li.id는 String, toDo.id는 number 타입
    saveToDos();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    li.id = newTodo.id; // obj의 id 
    const span = document.createElement("span");
    span.innerText = newTodo.text; //obj의 text값
    
    const button = document.createElement("button");  
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);

    // li 안에 span, button 넣기
    li.appendChild(span); //append = 끝에 들어감
    li.appendChild(button);

    // HTML에 li 추가
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    //text 대신 object를 넣기
    const newTodoObj = {
        text: newTodo,
        id: Date.now()
    }
    toDos.push(newTodoObj); 
    paintToDo(newTodoObj);
    saveToDos(toDos);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

// JSON.parse() : 단순한 String을 살아있는 array로 변환함
const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) { //저장된 todo들이 있으면
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos //전에 있던 todo를 array에 넣어 복원한다.

    parsedToDos.forEach(paintToDo);
}