- 본 내용은 '노마드코더' 바닐라 JS 크롬 앱 만들기 강의를 보고 정리된 글입니다.
💊 html 작성
to-do 를 작성하는 form, input 생성한다.
작성한 to-do list 화면에 계속 보여지는 곳을 생성한다. (ul)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum by juya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<form action="" class="js-toDoForm">
<input type="text" placeholder="Write a to do">
</form>
<ul class="js-toDoList">
</ul>
<h4 class="js-greeting greeting"></h4>
<script src="clock.js"></script>
<script src="greeting.js"></script>
<script src="todo.js"></script>
</body>
</html>💊 js 작성
기억해자!
- forEach : 배열에 요소들에 순서대로 콜백함수를 실행한다.
- filter : 배열에 요소들 중 주어진 조건의 값이 true인 요소만을 모아서 새로운 배열로 반환한다.
- event.target : 이벤트가 발생된 요소를 찾는다.
const toDoForm = document.querySelector('.js-toDoForm'),
toDoInput = toDoForm.querySelector('input'),
toDoList = document.querySelector('.js-toDoList');
const TODOS_LS = 'toDos';
let toDos = [];
function saveToDo() {
localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); //localstorage에는 JSON 형식의 텍스트만 들어갈 수 있다.
}
function handleBtn(event) {
const btnValue = event.target; // 이벤트가 일어난 버튼을 할당
const li = btnValue.parentNode; // 클릭된 버튼의 부모 태그를 할당
toDoList.removeChild(li); // 해당 태그 지우기
const clearToDos = toDos.filter(function(toDo) { // filter 함수는 주어진 조건 값이 true인 요소만을 모아서 새로운 배열로 반환한다.
return toDo.id !== parseInt(li.id)
});
toDos = clearToDos;
saveToDo();
}
function paintToDoList(text) {
const li = document.createElement('li'); // li 태그 생성
const delBtn = document.createElement('button'); // 삭제 버튼 생성
delBtn.innerText = '❌';
const span = document.createElement('span');
const newId = toDos.length + 1;
span.innerText = text;
li.id = newId;
li.appendChild(delBtn);
li.appendChild(span);
toDoList.appendChild(li);
const toDoObj = {
text : text,
id : newId
}
toDos.push(toDoObj);
saveToDo();
delBtn.addEventListener('click', handleBtn);
}
function handleSubmit(event) {
event.preventDefault();
const currentValue = toDoInput.value
paintToDoList(currentValue);
toDoInput.value = '';
}
function loadToDos() {
const loadToDos = localStorage.getItem(TODOS_LS);
if ( loadToDos !== null ) {
const parsedToDos = JSON.parse(loadToDos); // 로컬스토리지에 값이 json 타입의 string이기 떄문에, javascript 데이터 타입인 객체로 변형 필요.
parsedToDos.forEach(function(todo) { //forEach 배열을 순서대로 콜백함수를 실행한다. *콜백함수: 함수 안에서 또 함수를 콜한다.
paintToDoList(todo.text)
});
}
}
function init() {
loadToDos();
toDoForm.addEventListener('submit', handleSubmit)
}
init();JSON 데이터 형식??
JSON은 데이터를 저장하거나 전송할 때 많이 사용되는 데이터 교환 형식, 주로 클라이언트와 서버간의 데이터를 교환 시 많이 사용 된다.
자바스크립트의 객체의 형식을 기반으로 만들어졌고, 문법 또한 자바스크립트와 매우 유사하다.
- JSON.parse : JSON 형식의 텍스트를 자바스크립트 객체로 변환
- JSON.stringify : 자바스크립트 객체를 JSON 텍스트로 변환.
콘텐츠 마케터에서 프론트엔드 개발자로...