[바닐라 JS로 크롬 앱 만들기] 06 To Do List

박지원 ·2023년 2월 20일

1. Setup

    <form id ="todo-form">
        <input type ="text" placeholder="Write a Todo and Press Enter" required />
    </form>

HTML에서 todo를 위한 입력창을 만듬

여기서 required가 필요한 이유는 input이 있지만 사용자가 이를 무시하고 submit하려고 할 때, 경고창을 띄어주기 위해 필요한 기능.

HTML (form으로 입력창 만들어주고, ul로 리스트 만들어줌 li는 JS를 통해서 만들거임)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" />
    <title>Momentum App</title>
</head>
<body>
    <h2 id="clock">00:00</h2>
    <form class="hidden" id="login-form">
        <input maxlength ="15" type="text" placeholder="What is your name?" required />
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <form id ="todo-form">
        <input type ="text" placeholder="Write a Todo and Press Enter" required />
    </form>
    <ul id = "todo-list"></ul>
    <div id= "quote">
        <span></span>
        <span></span> 
    </div>
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    <script src="js/todo.js"></script>
</body>
</html>

JS(기본적인 setup)

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

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

}
toDoForm.addEventListener("submit", handleToDoSubmit);

2. Adding ToDos

입력 받은 값을 HTML의 li에 집어 넣고 싶음
그리고 우리는 삭제를 위해서 span까지 깊이 만들고 싶음

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

function paintToDo(newTodo) {
    const li = document.createElement("li"); //li 생성
    const span = document.createElement("span"); //span 생성
    li.appendChild(span); //span을 li안에 집어넣기 
    span.innerText = newTodo; //span안에 넣을 텍스트는 newTodo 
    toDoList.appendChild(li); // li를 finally ul에다가 집어넣는 것임. 이래야지 화면에 뜨지. 
}


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

}
toDoForm.addEventListener("submit", handleToDoSubmit);

지금의 문제는 todo가 저장이 되지 않고, 삭제도 불가능하다는 것.

3 Deleting To Dos

JS (delete function을 만들었음)

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

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

function paintToDo(newTodo) {
    const li = document.createElement("li"); //li 생성
    const span = document.createElement("span"); //span 생성
    span.innerText = newTodo; //span안에 넣을 텍스트는 newTodo
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteTodo)
    li.appendChild(span); //span을 li안에 집어넣기 
    li.appendChild(button);
    toDoList.appendChild(li); // li를 finally ul에다가 집어넣는 것임. 이래야지 화면에 뜨지. 
}


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

}
toDoForm.addEventListener("submit", handleToDoSubmit);

이렇게 버튼을 만들었고 console에서 어떤 버튼이 눌렸는지 알게 하기 위해서

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

이 코드를 짬. target에서 parentElement(li)를 찾아서 innerText를 보이라는 것임.

JS (실제로 todo를 지우는 기능)

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

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

function paintToDo(newTodo) {
    const li = document.createElement("li"); //li 생성
    const span = document.createElement("span"); //span 생성
    span.innerText = newTodo; //span안에 넣을 텍스트는 newTodo
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteTodo)
    li.appendChild(span); //span을 li안에 집어넣기 
    li.appendChild(button);
    toDoList.appendChild(li); // li를 finally ul에다가 집어넣는 것임. 이래야지 화면에 뜨지. 
}


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

}
toDoForm.addEventListener("submit", handleToDoSubmit);

이제 저장만 할 줄 알면 되겠지?

4. Saving To Dos

JSON.stringify()라는 함수는 자바스크립트에 object나 array 어떤 자바스크립트 코드건 간에 string으로 바꿔줌.

즉 local storage에는 array가 저장이 안되기 떄문에 JSON.stringify로 array처럼 생긴 string으로 저장하는 것임.

JSON을 사용하지 않았을 때

JSON을 사용했을 때

JS(saveTodo라는 함수를 만들었음, toDos 라는 array를 만들어서 newTodo가 들어오면 이 array에 들어가게 설계)

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

const toDos = [];

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

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

function paintToDo(newTodo) {
    const li = document.createElement("li"); //li 생성
    const span = document.createElement("span"); //span 생성
    span.innerText = newTodo; //span안에 넣을 텍스트는 newTodo
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo)
    li.appendChild(span); //span을 li안에 집어넣기 
    li.appendChild(button);
    toDoList.appendChild(li); // li를 finally ul에다가 집어넣는 것임. 이래야지 화면에 뜨지. 
}


function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveTodo();
}
toDoForm.addEventListener("submit", handleToDoSubmit);

5.Loading To Dos

새로고침하고 입력하면, 예전 Todo들 위에 새 Todo들이 올라가서 예전값들이 사라지는 문제가 있음.
따라서 toDos를 const에서 let으로 변환해주고 배열로 바꾼 parsedToDos를 toDos에 넣어주기

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

const TODOS_KEY = "todos" ;

let toDos = [];

function saveTodo(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

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

function paintToDo(newTodo) {
    const li = document.createElement("li"); //li 생성
    const span = document.createElement("span"); //span 생성
    span.innerText = newTodo; //span안에 넣을 텍스트는 newTodo
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo)
    li.appendChild(span); //span을 li안에 집어넣기 
    li.appendChild(button);
    toDoList.appendChild(li); // li를 finally ul에다가 집어넣는 것임. 이래야지 화면에 뜨지. 
}


function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveTodo();
}       
toDoForm.addEventListener("submit", handleToDoSubmit);

function sayHello(item){
    console.log("this is the turn of",item)
}
           
const savedToDos = localStorage.getItem(TODOS_KEY);   

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos); //array로 바꿔주는 역할 
    toDos = parsedToDos; //그걸 toDos에 넣어주며 예전것들을 복원해주는 것, 
    parsedToDos.forEach(paintToDo); //각각의 아이템들에게 paintToDo라는 함수를 실행하겠다는 뜻 

}

6. Deleting To Dos

Todo를 화면상에서 지울 수는 있지만(HTML) 데이터베이스 내에서는 아직 지울지 모름
일단 랜덤 아이디(Date.now라는 함수 사용)를 주고, 해당 아이디에 Todo를 맞추기

일단 Todo를 저장하는 function은 handleToDoSubmit임
이제는 그냥 text를 push 하는 것이 아닌, ID가 있는 오브젝트를 푸시하고 싶음.

item을 제거하기보다 item을 제외하고 새 array를 만드는 것임
-> fillter 라는 함수를 사용하면 됨.

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

const TODOS_KEY = "todos" ;

let toDos = [];

function saveTodo(){ //데이터를 저장하는데 JSON을 이용해서 배열로 저장하는 함수 
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

function deleteTodo(event) { //데이터를 지우는 함수 
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));//이게 함수를 정의할 수 있는 새로운 방법임 (함수 이름을 쓸 필요가 없음)
    // 위 문장의 뜻은 사용자가 클릭한 li.id가 toDo.id와 다르다면 true를 반환하는 것임. 배열을 true를 반환해야지 입력이 됨. 
    // 그렇다면 li.id가 toDo.id와 같다면 false를 반환할 것이고 그렇다면 li.id가 포함된 옵젝을 뺴고 새 함수를 생성할 것임. 
    //parseInt는 toDo.id는 number 타입이고 li.id는 string 타입이여서 li.id를 number로 바꿔주는 것임 
    saveTodo();
}

function paintToDo(newTodo) { //todo를 화면에 표시하는 함수 
    const li = document.createElement("li"); //li 생성
    li.id = newTodo.id;
    const span = document.createElement("span"); //span 생성
    span.innerText = newTodo.text; //span안에 넣을 텍스트는 newTodo
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo)
    li.appendChild(span); //span을 li안에 집어넣기 
    li.appendChild(button);
    toDoList.appendChild(li); // li를 finally ul에다가 집어넣는 것임. 이래야지 화면에 뜨지. 
}


function handleToDoSubmit(event) { // 데이터를 입력 받는 함수 
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj = {
        text: newTodo, 
        id: Date.now(),
    };
    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveTodo();
}       
toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);   

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos); //array로 바꿔주는 역할 
    toDos = parsedToDos; //그걸 toDos에 넣어주며 예전것들을 복원해주는 것, 
    parsedToDos.forEach(paintToDo); //각각의 아이템들에게 paintToDo라는 함수를 실행하겠다는 뜻 

}

박지원

배움이 즐거운 개발자

이전 포스트

[바닐라 JS로 크롬 앱 만들기] 05 Quotes and Background

다음 포스트