- 본 내용은 '노마드코더' 바닐라 JS 크롬 앱 만들기 강의를 보고 정리된 글입니다.
💊 html 작성
사용자가 입력할 수 있는 입력창을 만든다 (form > input)
사용자를 기억한 후 출력될 글자 요소 공간도 만든다. (h4)
<!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>
<h4 class="js-greeting greeting"></h4>
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>💊 css 작성
js if문으로 localstorage에 기억되는 값이 있을 때와 없을 때 변화를 주기 위해
form과 환영 멘트가 기본적으로는 보이지 않도록 설정하고, 보여져야 할 경우를 위해 새로운 class 선택자를 생성하여 displat : block을 설정해둔다.
.form,
.greeting {
display: none;
}
.showing {
display: block;
}
- .showing 은 현재는 클래스가 없는 선택자이지만, js를 DOM을 통해 class를 추가 시 해당 css가 실행 되도록 하는 것이다.
💊 js 작성
js 에서 각각의 태그 요소들을 활용할 수 있도록 변수(상수)에 선택하여 할당한다.
원하는 프로그램을 만들 때 각각을 하나하나 생각하여 진행하는 습관을 들여야한다.
- 불러온다 : localstorage의 값을 불러온다. (값이 있을 때, 없을 때 경우의 따른 실행)
- (값이 있을때) 출력한다 : 폼을 없애고, 환영 멘트를 출력한다.
- (값이 없을때) 물어본다 : 폼을 보여주고, input의 값을 입력하는 이벤트가 발생하면,
- 이벤트 핸들러(이벤트 발생시) : 값을 저장하고, 출력한다.
- 저장한다 : localstorage에 물어본 input 값을 저장한다.
const form = document.querySelector('.js-form');
input = form.querySelector('input'),
greeting = document.querySelector('.js-greeting');
const USER_LS = 'currentUserName',
SHOWING_CN = 'showing';
function saveName(name) {
localStorage.setItem(USER_LS, name)
}
function handleSubmit(event) { // 'event' 는 addEventListener 에서 함수 실행 시 가장 처음 전달된 인수가 Event 객체다.
event.preventDefault(); // 이벤트를 취소한다.
const currentValue = input.value;
saveName(currentValue);
paintGreeting(currentValue);
}
function askForName() {
form.classList.add(SHOWING_CN);
form.addEventListener('submit', handleSubmit); //'event' 객체 자동생성?
// input.addEventListener 하면 실행이 안된다. (submit이 사용자가 form을 제출 했을 떄 발생하는 이벤트이기 떄문이라고 추측한다.)
}
function paintGreeting(text) {
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello, ${text}`;
}
function loadName() {
const currentUserName = localStorage.getItem(USER_LS);
if ( currentUserName === null ) {
askForName();
} else {
paintGreeting(currentUserName);
}
}
function init() {
loadName();
}
init();
콘텐츠 마케터에서 프론트엔드 개발자로...