JS ToDo List 만들기

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

function paintToDo(newTodo) {
    const li = document.createElement("li");
    //변수명을 꼭 li 말고 다른것으로 해도 된다. 하지만 구분을 쉽게하기 위해 li
    //하지만 createElement안에는 li를 꼭써야한다. 이유는 li를 추가하기 위해서이다.
    const span = document.createElement("span");
    li.appendChild(span);
    //li안에 자식으로 span을 추가
    span.innerText = newTodo;
    //span안에 handelToDoSubmit에서 받은 변수 newTodo를 넣는다.
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

    

const li = document.createElement("li");

변수명을 꼭 li 말고 다른 것으로 해도 된다. 하지만 구분을 쉽게 하기 위해 li
하지만 createElement안에는 li를 꼭 써야 한다. 이유는 li를 추가하기 위해서이다.

 

    

li.appendChild(span);

li안에 자식으로 span을 추가

 

   

span.innerText = newTodo;

span안에 handelToDoSubmit에서 받은 변수 newTodo를 넣는다.

 

 

toDoInput.value = "";  텍스트 상자 안의 텍스트를 초기화시켰다.

 

 

 

---

이 둘 코드를 추가해 버튼을 생성하고 버튼을 누르면 ToDo 리스트를 삭제할 수 있는 코드를 만들었다.

    const button = document.createElement("button");
    button.innerText = "x";
    button.addEventListener("click", deleteToDo);

 

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

JSON.stringify()라는

 

 

---

 

객체를 사용한다. 이 도구는 우리가 대입한 값을 알아서 string의 형태로 바꿔준다.

 

 

이렇게 자동으로 string 형태로 바뀌어서 저장이 된다.

 

JSON.stringify(toDos)

[1,2,3,4] => "["1","2","3","4"]"

---

JSON.parse(savedToDos)

"["1", "2", "3", "4"]"  => ["1","2","3","4"]

살아 있는 배열로 바뀌게 된다.

 

function sayHello(item) {
    console.log("This is turn up", item);
}

const savedToDos = localStorage.getItem(TODOS_KEY);

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

이런 코드를 축약할 수 있는 방법이 있다.

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

이렇게 사용하면 위의 코드와 같은 결과 값을 얻을 수 있다.

 

 

forEach는 는 저장되어 있는 리스트의 값을 하나씩 가져와서 sayHello의 인자 값으로 하나씩 사용을 한다.

sayHello를 저장되어 있는 리스트의 개수만큼 asayHello()하는 것이 아니라

저장되어 있는 리스트의 개수만큼 sayHello("a") sayHello("b")... 하는 것이다.