코드네임 :
VanillaJS - login 기능 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Momentum</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- form 의 기본 동작은 submit -->
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name>" />
<!-- <button>Log in</button> -->
<input type="submit" value="Log In" />
</form>
<script src="app.js"></script>
</body>
</html>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
// a 태그는 하나 밖에 없엇으니까 이렇게 할수 잇는것
const link = document.querySelector("a")
/// onLoginSubmit() 에서 () 괄호 안에 arguments({information about the event that just happened})가 있다면 이거에 대한 info를 브라우저에게주는것
function onLoginSubmit(event) {
event.preventDefault() //새로고침 방지
console.log(event)
}
function handleLinkClick(){
alert("clicked");
}
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Momentum</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- form 의 기본 동작은 submit -->
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="What is your name>" />
<!-- <button>Log in</button> -->
<input type="submit" value="Log In" />
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>
</html>
.hidden{
display: none;
}
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
//반복되는 String들은 따로 변수에 저장해줘서 사용해주는 게 쭈음!!!!
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
event.preventDefault(); //새로고침 방지 (브라우저의 기본동작 방지)
loginForm.classList.add(HIDDEN_CLASSNAME); // 로그인 폼 숨기기 (add hidden)
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username); // 입력한 username 정보를 로컬 스토리지에 저장
// greeting.innerText = `Hello ${USERNAME_KEY}`; // 백틱 사용 (Option키 + ₩)
// greeting.classList.remove(HIDDEN_CLASSNAME)
paintGreetings(username);
}
loginForm.addEventListener("submit", onLoginSubmit);
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME); //숨겨져있었던 환영메시지를 보이게 변경!! (remove hidden)
}
const savedUsername = localStorage.getItem("USERNAME_KEY");
if (savedUsername == null) {
//show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
//show the greetings
// greeting.classList.remove(HIDDEN_CLASSNAME);
// greeting.innerText = `Hello ${savedUsername}`;
paintGreetings(username);
}
'🖥️Frontend > VanillaJS' 카테고리의 다른 글
| VanillaJS - Weather (0) | 2025.03.10 |
|---|---|
| VanillaJS - ToDo List (0) | 2025.03.09 |
| VanillaJS - Quotes and Background (0) | 2025.03.09 |
| VanillaJS - Clock (0) | 2025.03.09 |
| JS (0) | 2025.03.03 |
'🖥️Frontend/VanillaJS' Related Articles
more
