JavaScript_크롬 앱 만들기

서은서·2023년 3월 20일
0
post-thumbnail

4. TodoList

1) form + list 만들 준비

1-1) form
submit을 하는 순간 refresh가 됨!
-> preventDefault를 이용하여 이를 막음

//todo.js
const todoForm = document.getElementById("todo-form");
const todoInput = todoForm.querySelector("input");
const todoList = document.getElementById("todo-list");

function handleToDoSubmit(event){
	event.preventDefault();
    const newTodo = todoInput.value;
    paintTodo(newTodo);
    todoInput.value = "";
}

todoForm.addEventListener("submit",handelToDoSubmit);

1-2) "ul"만 만들고 JavaScript에서 li를 추가시킬 것!
-> 2)에서 다룰 예정

2) li

// index.html
<form id="todo-form">
        <input type="text" placeholder="Write a To-do and press enter" required>
</form>
<ul id="todo-list">
	<li>
    	<span></span>
        <button><button>
    </li>
</ul>
// 의 형태로 만들 것! 이렇게 만드는 이유는 삭제버튼을 만들기 위함!
// but 문제점은 새로고침을 하는 순간 다 사라짐 -> 저장방법을 생각해 봐야함

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

3) 삭제버튼 추가하기

button이 click event를 기다리고 있어야함

// todo.js

function paintTodo(newTodo){
	const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText = "❌"
    li.appendChild(span);
    li.appendChild(button);
    button.addEventListener("click",deleteTodo);
    todoList.appendChild(li);
}

이렇게 하면 어느 li가 클릭되었는지 알 수가 없음!
-> event -> targer: 어디서 클릭이 되었는지를 알 수 있음
-> parent가 누구인지 아는 것이 중요함!

function deleteTodo(event){
	const li = event.target.parentElement;	// 클릭된 element의 부모 -> 우리가 삭제하고자 하는 li
    li.remove();
}

4) todo save하기

localStorage 이용하자!!

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

function saveToDos(){				// localStorage에 배열을 저장
	localStorage.setItem(TODOS_KEY,toDos);
}

-> but, 새로고침하면 배열 위에 새롭게 저장됨(기존 정보가 날라감)

JSON.stringfy: object나 array 또는 어떤 JS 코드던간에 string으로 만들어줌

function saveToDos(){				// localStorage에 배열을 저장
	localStorage.setItem(TODOS_KEY,JSON.stringfy(toDos));
    // localStorage에 toDos 배열을 text로 저장함!
}

5) JSON.parse()

JSON.parse("[1,2,3,4]");
// string을 array로 만들어줌

6) li들을 나타내기

paintTodo() 함수를 이용!
기존 array와 나중의 array를 둘다 유도하고 싶음
const toDos -> let toDos로 수정! (let은 변경이 가능하기 때문)
localStorage에 toDo가 있다면 복원시킴

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null){
	const parsedToDos = JSON.parse(savedToDos);		// text를 array로 바꿔서 저장함
    parsedToDos.each(paintTodo);      // item마다 paintTodo를 실행
    toDos = parsedToDos;
}

7) toDos array !== localStorage

toDos array !== localStorage
-> 단지 복사를 하는 것 뿐!

-> array 안에 중복된 값이 있다면 구별해야함 -> todo에 id를 만들어서 id를 이용하자! -> todo를 text가 아닌 object로 만들자! ex) { id : 121212, text : "drink" }

-> id는 Date.now()를 이용

newObj={
	text:newTodo,
    id:Date.now()
}

// todo.js

function handelToDoSubmit(event){
    event.preventDefault();
    const newTodo = todoInput.value;
    const newTodoObj={
        text: newTodo,
        id: Date.now()
    }
    toDos.push(newTodoObj);		// 변경 toDos에 object를 추가함
    paintTodo(newTodoObj);		// 변경
    todoInput.value ="";
    saveToDos();
}

function paintTodo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.id=newTodo.id;           	// 변경  li를 구별할 수 있는 수단이 됨!
    span.innerText = newTodo.text;	// 변경
    const button = document.createElement("button");
    button.innerText = "❌";
    li.appendChild(span);
    li.appendChild(button);
    button.addEventListener("click",deleteTodo);
    todoList.appendChild(li);
}

-> but, ❌를 눌러도 화면상에는 사라지지만 localStorage에는 사라지지 않음!

8) delete

filter를 이용!
이때 li.id는 string이기 때문에 parseInt를 이용하여 정수로 변환해야함

// ex)
[1,2,3,4].filter(함수);
// 함수: 새 array에 이 object를 유지하고 싶으면 무조건 true를 반환해야함 -> if false? 새 array에 포함 X

// todo.js

function deleteTodo(event){
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));		// 새 array를 toDos에 다시 저장함
    /* 
    function sexyFilter(toDo){
    	toDo.id !== parseInt(li.id);
    	}
    toDos = toDos.filter(sexyFilter);라고 써도 됨 
    */
    saveToDos();		 // localStorage에 저장함
}
profile
내일의 나는 오늘보다 더 나아지기를 :D

0개의 댓글