[JavaScript] Momentum App - 4.3 ToDo-List Loading To Dos

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

const TODOS_KEY = "todos"

const toDos = [];

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

function deleteToDo(event){
    //target은 눌린 button - 부모 요소는 li -> 삭제 대상
    const li = event.target.parentElement; 
    li.remove(); // 삭제
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    // span에 텍스트 값 넣기 
    span.innerText = newTodo;
    
    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(); // window 기본동작(페이지 새로고침) 막기
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo); // 1.Array에 newToDo 집어 넣기
    paintToDo(newTodo); // 2.화면에 newToDo 그리기
    saveToDos(toDos);// 3. toDo들을 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

function sayHello(item){
    console.log("this is turn of the", item);
}

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

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    //parsedToDos에 있는 각각의 item에 대해 적용 forEach(() => action) arrow function
    parsedToDos.forEach((item) => console.log("thit is turn of ", item));
}

 

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

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