js) To Do List-Loading To Dos

-html에서의 코드

<form id="todo-form">
        <input type="text" placeholder="Write a To Do and Press Enter" required />
    </form>
    <ul id="todo-list"></ul>

html에서 required는 필수

 

-js에서의 코드

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); //toDoForm 안에 input이 1개라서
//const toDoInput = doucument.querySelector("todo-from input"); //위에랑 같은 의미
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event){//js가 방금 발생한 event를 handleToDoSubmit의 첫번째 인자로 준다.
    event.preventDefault()
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit)

html에서 from은 submit을 해주기 때문에 입력을 하고 enter를 누르면 입력값이 새로고침된다. 그래서 새로고침을 방지하기 위해서 preventDefault를 이용해 새로고침을 막아준다.

 

=>이 코드까지는 입력값을 저장하고 다시 빈칸으로 만들어준다.

 

-paintToDo

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);//li안에 span을 넣어줌
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

li, span을 만들고 li안에 appendchild를 이용해 span을 넣어줄 수 있다. 그리고 toDoList에도 li를 넣어줬다. paintToDo를 사용하면 사이트에 내가 할 것들을 저장할 수 있다. 하지만 여기서 단점은 삭제를 못하고 새로고침하면 목록이 다 사라진다는 점이다.

 

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    span.innerText = newTodo;
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);//li안에 span을 넣어줌
    li.appendChild(button);
    toDoList.appendChild(li);
}

최종 완성된 코드이며 x 버튼을 추가하여 삭제도 시켜줄 수 있도록 했다.

 

-deleteToDo

function deleteToDo(event){
    console.dir(event.target);
}

deleteToDo에 인자를 event로 하여 방금 발생한 이벤트를 준다. 그리고 console.dir를 하면 여러 프로퍼티가 보이는데 그 중에서 parentElement와 parentNode를 통해 여러 목록 중 무엇이 클릭되었는지 parent를 알아내 구별을 해준다.

 

function deleteToDo(event){
    console.dir(event.target.parentElement.innerText);
}

위 코드처럼 하면 무엇이 클릭되었는지 알 수 있다.

 

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

최종적으로 코드를 이렇게 완성하면 li에 삭제해야하는 부모가 저장되고 그것을 삭제해주면된다. 그러면 목록을 삭제할 수 있다.

 

-saveToDos

function saveToDos(){
    localStorage.setItem("todos", JSON.stringify(toDos)); //앞에꺼 키 값, JSON은 문자로 바꿔서 array형태로 바꿔준다.
}

setTtem은 앞에 인자는 키 값이고 뒤에 인자는 값을 받는다.

로컬 스토리지에는 텍스만 저장 가능하다. 그래서 JSON을 이용한다.

 

JSON

const player = {name:"nico"}
JSON.stringify(player)

JSON은 문자로 바꿔서 array형태로 바꿔준다.

 

function handleToDoSubmit(event){//js가 방금 발생한 event를 handleToDoSubmit의 첫번째 인자로 준다.
    event.preventDefault()
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveToDos()
}

handleToDoSubmit에도 saveToDos를 추가하여 저장해준다.

---

Loading To Dos

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

if (saveToDos){
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello)
}

JSON.stringify([1,2,3,4])은 "[1,2,3,4]"으로 나오고
JSON.parse("[1,2,3,4]")은 [1,2,3,4]로 나온다.

 

forEach는 저장된 리스트의 원소를 sayHello 함수의 파라미터로 넣어서 사용한다.

 

저 코드를 축약하면

if (saveToDos){
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach((item) => console.log("this is the turn of", item));
}

이렇게 사용할 수 있는데, =>는 화살표 함수라고 한다. 위 코드랑 속도 차이는 없어서 뭘 써도 상관 없다.

 

-사이트에 적용하기

let toDos = [];

toDos를 변경이 가능하도록 let로 바꿔준다.

 

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

그 후 toDos에 parsedToDos를 넣어주고 forEach(paintToDo)를 하면 새로고침하거나 다시 입력해도 화면에 리스트 목록들이 나와있다.