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에 다시 한 번 저장한다.
728x90