로그인 하면 hidden class 를 추가함으로써 CSS 에서 숨겨주고, 인사문을 건넨다.
인사문도 처음엔 가려져 있고, 로그인 하면 나온다.
<body>
<form 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>
</body>
// app.js
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME)
}
loginForm.addEventListener("submit", onLoginSubmit)