일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 컴퓨터 네트워크
- codesandbox
- 코딩테스트 고득점 Kit
- react
- 자바스크립트
- react firebase
- 데이터모델링과마이닝
- Java
- 백준
- 프로그래밍 언어론
- useState
- vanillaJS
- 리액트 훅
- 코틀린
- useEffect
- 자바
- React JS
- 자바 공부
- JavaScript
- websocket
- 디자인 패턴
- 프로그래머스
- 프로그래머스 자바
- 코딩테스트 고득점 Kit 완전탐색
- 프로그래머스 완전탐색
- design pattern
- NextJS
- 리액트
- 장고
- react hook
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:22728x90
< 구현할 화면 >
- 위 스크린샷의 왼쪽 화면에서 체크리스트의 항목을 삭제하면 오른쪽 화면의 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
'Web > Javascript' 카테고리의 다른 글
[VanillaJS] Google Chrome App Momentum 만들기 - 6. 완성 (0) | 2021.08.06 |
---|---|
[VanillaJS] Google Chrome App Momentum 만들기 - 5. weather (0) | 2021.08.06 |
[VanillaJS] Google Chrome App Momentum 만들기 - 4-1. Checklist Load (0) | 2021.08.04 |
[VanillaJS] Google Chrome App Momentum 만들기 - 3-2. Random Background Image (0) | 2021.08.03 |
[VanillaJS] Google Chrome App Momentum 만들기 - 3-1. Random Quotes (0) | 2021.08.03 |