[VanillaJS] Google Chrome App Momentum 만들기

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

기록하는 개발자

[VanillaJS] Google Chrome App Momentum 만들기 - 4-2. Checklist Delete 본문

Web/Javascript

[VanillaJS] Google Chrome App Momentum 만들기 - 4-2. Checklist Delete

밍맹030 2021. 8. 5. 16:22

728x90

< 구현할 화면 >

- 위 스크린샷의 왼쪽 화면에서 체크리스트의 항목을 삭제하면 오른쪽 화면의 localStorage에서도 삭제된다.

- 새로고침 실행 시 내가 삭제를 원했던 항목을 아래 스크린샷처럼

오른쪽 화면 및 localStorage 에서 모두 보이지 않도록 조치를 취한다.

< HTML >

<!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</title>
</head>
<body>
    <!--input의 유효성 검사를 작동시키기 위해서는 form 태그를 사용해야한다.-->
    <form class="hidden" id="login-form"> 
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log in</button>
    </form>

    <h2 id="clock"> 00:00:00</h2>
    <h1 class="hidden" id="greeting"></h1>
    <br>

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

    <!--js로 리스트를 추가할 부분-->
    <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>

< todo.js >

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

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

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

    const newTodoObj={ 
        text : newToDo,
        id : Date.now(),
    };

    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
}

function paintToDo(newToDo){
    const li = document.createElement("li");
    li.id=newToDo.id;

    const span = document.createElement("span");
    span.innerText = newToDo.text;

    const button = document.createElement("button");
    button.innerText = "❌";

    button.addEventListener("click",deleteToDo);

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

function deleteToDo(event){
    const li =event.target.parentElement;
    li.remove();
    toDos =toDos.filter((toDo)=> toDo.id !== parseInt(li.id));
    saveToDos();
}

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

toDoForm.addEventListener("submit", handleToDoSubmit)

const savedToDos=localStorage.getItem(TODOS_KEY);

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

< 지난 checklist load 에서 변경된 부분 >

1. handleToDoSubmit 함수

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

    const newTodoObj={ //배열에 text 대신 object를 저장
        text : newToDo,
        id : Date.now(), //random처럼 보이는 ms 반환
    };

    toDos.push(newTodoObj); //배열에 객체 push
    paintToDo(newTodoObj); //html에 객체 전달
    saveToDos();
}

- 기존 : 배열에 input으로 들어온 text만 저장한다. → string type의 배열 생성

- 변경 : 배열에 input으로 들어온 text와 Date.now() 함수를 이용한 id를 함께 저장한다. → object type의 배열 생성

-paintToDo 함수에도 text인 newToDo가 아닌 text와 id가 함께 들어있는 객체 자체를 전달한다.

2. paintToDo 함수

function paintToDo(newToDo){
    const li = document.createElement("li");
    li.id=newToDo.id;

    const span = document.createElement("span");
    span.innerText = newToDo.text;

    const button = document.createElement("button");
    button.innerText = "❌";

    button.addEventListener("click",deleteToDo);

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

- li 태그의 id로 배열에 저장한 id를 저장한다.

- span의 innerText 에 들어갈 내용을 newToDo가 아닌 newToDo에 있는 text로 저장한다.

3. deleteToDo 함수

function deleteToDo(event){
    const li =event.target.parentElement;
    li.remove();
    toDos =toDos.filter((toDo)=> toDo.id !== parseInt(li.id));
    saveToDos(); .
}

- filter 함수를 사용해 새로운 배열로 만들어 기존 toDos 배열에 저장한다.

→ 단, 삭제를 원하는 li의 id와 같은 경우 해당 객체는 새로운 배열에 저장하지 않는다.
- 바뀐 배열을 localStorage에 다시 한 번 저장한다.