바닐라JS - 앱 만들기 to do list

 

Adding To Dos

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

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

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

toDoForm.addEventListener("submit", handleToDoSubmit);

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

 

html에 to do를 input할 <form>과 <input> 태그를 추가

그리고 to do list를 저장할 <ul> 태그 추가

 

input창에 to do를 입력하고 submit을 하면 handleTodoSubmit 호출

 value를 newTodo 변수에 저장한 후 paintToDo 함수를 호출하고 argument로 보냄

paintToDo 함수에서 <ul> 태그 안에 <li> 태그를 만들고 그 안에 <span> 태그를 생성해 newTodo 변수를 span text로 표시

 

 

 

Deleting To Dos

- 삭제 버튼을 추가하여 버튼을 눌렀을 때 해당 to do가 삭제되도록 만들기

 

버튼을 "클릭" 했을 때 클릭된 버튼 찾기

console.log(event);

event의 정보를 확인해 어떤 버튼이 클릭되었는지 알 수 있는 정보 탐색

path에 어떤 element에서 이벤트가 발생했는지 확인 가능

 

console.dir(event.target);

target property로 어떤 html element가 클릭됐는지 알 수 있음

항목을 보며 힌트가 될만한 것을 찾기

 

console.dir(event.target.parentElement);

target 안에 parentElement property로 부모 태그 확인 가능

 

console.log(event.target.parentElement.innerText);

부모태그의 innerText를 확인하면 누른 버튼의 to do 내용을 알 수 있음

 

to do가 각 <li> 태그로 감싸져 있기 때문에 parentElement를 조회하여 해당 <li>를 삭제하면 됨

 

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

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText="❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

삭제할 때 클릭할 <button>을 추가하고 click 이벤트 발생시 실행할 함수 정의

 

 

Saving To Dos

- to do를 저장하여 새로고침해도 없어지지 않게 하기

 

const toDos = [];

function saveToDos() {
    localStorage.setItem("todos", JSON.stringify(toDos));
}

to dos 배열 정의

그냥 toDos로 저장하고 localStorage.getItem()을 호출 하면 "a, b, c, d" 이런 식으로 불러옴

 

JSON.stringify()

자바스크립트 코드를 string으로 만들어줌

JSON.stringify()

stringify로 했을 때

 

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

const toDos = [];

function saveToDos() {
    localStorage.setItem("todos", JSON.stringify(toDos));
}

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

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText="❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

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

toDoForm.addEventListener("submit", handleToDoSubmit);