바닐라 JS로 크롬 앱 만들기 ( #7 TO DO LIST(1) )

 

 

1. Setup

 

index.html

todo.js

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

function handleToDoSubmit(event) {
     // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

}

toDoFrom.addEventListener("submit", handleToDoSubmit);

 

2. Adding ToDos

작성한 todo 텍스트를  ul > li > span 에 넣기

 

todo.js

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

// toDo를 그리는 역할
function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    
    // li 안에 span 넣기
    li.appendChild(span);

    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
     // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

    paintToDo(newTodo);
}

toDoFrom.addEventListener("submit", handleToDoSubmit);

결과

 

3. Deleting To Dos

x 버튼을 만들고 클릭시 삭제되도록

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

// todo 삭제
function deleteToDo(event){
    // event.target.parentElement : 클릭한 <button> 의 부모태그
    const li = event.target.parentElement;
    li.remove();
}


// toDo를 그리는 역할
function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button"); // 삭제하는 버튼 추가

    span.innerText = newTodo;
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

    button.addEventListener("click", deleteToDo); // x 버튼 클릭 시
}

function handleToDoSubmit(event) {
    // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

    paintToDo(newTodo);
}

toDoFrom.addEventListener("submit", handleToDoSubmit);

결과 확인

삭제 전 / 삭제 후 /  x 버튼이 추가 된 코드

 

4. Saving To Dos

toDo localStorage 사용해서 저장하기 

1. toDos 배열을 만들고 todo 를 그리기 전에 만든 배열에 push

2. toDos 를 localStorage 에 넣기 (localStorage 엔 array를 넣지 못하고 text 만 넣을 수 있으므로 JSON.stringify 사용)

 

JSON.stringify : JS object 나 array 나 어떤 것이든 string 으로 바꿔주는 기능

 

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

const TODOS_KEY = "todos";
const toDos = [];

 // localStorage에 저장 
function saveToDos() {
    // 배열을 stringify로 저장해서 배열 형태로
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); 
}

// todo 삭제
function deleteToDo(event){
    // event.target.parentElement : 클릭한 <button> 의 부모태그
    const li = event.target.parentElement;
    li.remove();
}


// toDo를 그리는 역할
function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button"); // 삭제하는 버튼 추가

    span.innerText = newTodo;
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

    button.addEventListener("click", deleteToDo);   // x 버튼 클릭 시
}

function handleToDoSubmit(event) {
    // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

    toDos.push(newTodo);

    paintToDo(newTodo);

    saveToDos();
}

toDoFrom.addEventListener("submit", handleToDoSubmit);

결과 확인

localStorage todo에 추가 된 내용 저장됨

 

 

' 노마드 코드 -  바닐라 JS로 크롬 앱 만들기' 공부하면서 정리한 내용입니다.