๐ฉ๐ผโ๐ป๋ฐ๋๋ผ JS๋ก ํฌ๋กฌ ์ฑ ๋ง๋ค๊ธฐ :#4.3-4.5
2
๋ ธ๋ง๋์ฝ๋ ํด๋ก ์ฝ๋ฉ
๋ชฉ๋ก ๋ณด๊ธฐ
7/13
1. output
Momentum Log In click!nomadcoders๐ฑ๏ธ2. 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="app.css">
<title>Momentum</title>
</head>
<body>
<form class="hidden" id="login-form">
<input type="text" />
<button id="button">Log In</button>
<a href="https://nomadcoders.co/" class="hidden">Go nomad!</a>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>
</html>
<!---href๋ฅผ ์ฌ์ฉํด์ ์ฌ์ดํธ๋ฅผ ๊ฐ์ ธ์ฌ์ ์๋๋ก ์ฐ๊ฒฐ์์ผ์ค๋ค.
hidden ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ html์ class hidden+ css์ hidden none display ์ถ๊ฐ -->3. JavaScript
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) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem("USERNAME_KEY", username);
paintGreetings(username);
}
function paintGreetings(username){
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
//value๊ฐ์ ๊ธฐ์ตํด์ ์์ํ ํด์ฃผ๊ณ , ์๋ก๊ณ ์นจ์ ๋๋ฅด๋ฉด ์ธ์ฌ๋ง์ ์ฌ๋ผ๊ณ ๋ค์ ๋ก๊ทธ์ธ์ฐฝ์ด ๋์จ๋ค.
}
//์ค๋ณต๋๋ ์์ ์ ๊ฑฐํ๊ธฐ ์ํด , ํจ์๋ก ๋ง๋ค์ด์ฃผ๊ณ ํจ์ํธ์ถ ํ๋ ํ์์ผ๋ก ์ฌ์ฉํ๋ค.
//๊ฐ์ ํจ์๋ผ๋ ํธ์ถ๋๋ ์์ ์ ๋ฐ๋ผ ๋งค๊ฐ์ธ์๋ ๋ฌ๋ผ์ง๋ค.
const savedUsername = localStorage.getItem("USERNAME_KEY");
console.log(savedUsername)// null ๊ฒฐ๊ณผ๊ฐ
//logic์ง๊ธฐ
if(savedUsername === null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit);
//show the form
} else {
paintGreetings(savedUsername)
}
//1.localStrage.setItem('mycat','tom)<- key .value local storage์ ์ ๋ณด๋ฅผ ์ ์ฅํ ์ ์๋ค.
//2.local storage.remove('mycat') ์ ์ฅํ ๋ด์ฉ์ญ์ ๊ฐ๋ฅ.
//3.localStorage.getItem("username") ์ ์ ๋ค์ ๊ธฐ๋ก ์ ๋ฌด ํ์ธ.4. css
.hidden {
display: none;
}
์์น์ด