TodoList 만들기

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

function deleteTodo(event) {
    const li = event.target.parentElement;
    toDos = toDos.filter(todo => todo.id !== parseInt(li.id));
    li.remove();
    saveTodos();
}

function paintToDo(newInput) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    li.id = newInput.id;
    span.innerText = newInput.text;
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function toDoSubmit(event) {
    event.preventDefault();
    const newInput = toDoInput.value;
    toDoInput.value = "";
    const todoObj = {text: newInput, id: Date.now()};
    toDos.push(todoObj);
    paintToDo(todoObj);
    saveTodos();
}

toDoForm.addEventListener("submit", toDoSubmit);

const savedTodos = localStorage.getItem(TODOS_KEY);

if (savedTodos) {
    const parsedTodos = JSON.parse(savedTodos);
    toDos = parsedTodos;
    parsedTodos.forEach(paintToDo);
}

 

 

JSON.stringify() : 배열을 문자열로 바꿔줌

JSON.parse() : 문자열을 배열로 바꿔줌

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

forEach() : 배열 뒤에 사용 할 수 있는 함수, 배열 안에 들어있는 각각의 값을 불러와 함수를 실행