JS 기초 정리3

"> "> ">

<body>
	<form class="hidden" id="login-form">
		<input required
		maxlength="15"
		type="text"
		placeholder="What is Your name?"
		/>
		<button>Log In</button>
	</form>
	<h1 class="hidden" id="greeting"></h1>
	<script src="app.js"></script>
</body>

.hidden {
	display: none;
}

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greet = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function paintGreet(username) {
	greet.innerText = `Hello ${username}`;
	greet.classList.remove(HIDDEN_CLASSNAME);
}

function onLoginSubmit(event) {
	event.preventDefault();
	const username = loginInput.value;
	loginForm.classList.add(HIDDEN_CLASSNAME);
	paintGreet(username);
	localStorage.setItem(USERNAME_KEY, username);
	console.log(username);
}

const savedUser = localStorage.getItem(USERNAME_KEY);

if (savedUser === null){
	loginForm.classList.remove(HIDDEN_CLASSNAME);
	loginForm.addEventListener("submit", onLoginSubmit);
} else {
	paintGreet(savedUser);
}