1. 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="style.css" />
<title>Momentum App</title>
</head>
<body>
<form class="hidden" id="login-form">
<input
required
maxlength ="15"
type="text"
placeholder="What is your name?" />
<button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>
</html>
2. CSS
.hidden {
display: none;
}
/* 요소를 숨기는 일을 함*/3. JS
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username";
function onLoginSubmit(event) { //5. 사용자에게 입력을 받았다면
event.preventDefault(); //6. 브라우저가 기본적으로 하는 행위를 중단(prevent)하고, 여기서 브라우저가 하는 submit 받으면 창을 새로고침함
loginForm.classList.add(HIDDEN_CLASSNAME); //7. 그리고 form(로그인 창)을 다시 없애줌
const username = loginInput.value; //8. 입력받은 value를 username으로 저장
localStorage.setItem(USERNAME_KEY, username); //9. 그리고 그걸 브라우저 API인 localStorage에 저장
paintGreetings(username); //10. paintGreeting함수 호출
}
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`; //11. 비어 있는 h1에다가 text를 추가해주는 것임
greeting.classList.remove(HIDDEN_CLASSNAME); //12. 그리고 hidden을 없애줌 = 화면에 띄워줌
}
const savedUsername = localStorage.getItem(USERNAME_KEY); //1. 제일 먼저 API에 저장되어있는게 있는지 확인 NULL이냐 이름이냐
if (savedUsername === null) { //2. 만약 NULL이라면
loginForm.classList.remove(HIDDEN_CLASSNAME) //3. form에 있는 hidden을 제거함. 그러면 로그인 창이 뜸
loginForm.addEventListener("submit", onLoginSubmit); //4. 그리고 사용자의 입력을 받는 것을 기다림
} else {
paintGreetings(savedUsername);
}
배움이 즐거운 개발자