๋ฐ์ํ
[์ถ์ฒ-์ ํ๋ธ ๋ ธ๋ง๋ ์ฝ๋ Nomad Coders]
index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form">
<input type="text" placeholder="What is your name?" />
</form>
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>
index.css
body {
background-color: #ecf0f1;
}
.btn {
cursor: pointer;
}
h1 {
color: #34495e;
transition: color 0.5s ease-in-out;
}
.clicked {
color: #7f8c8d;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
greeting.js
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting = document.querySelector(".js-greetings");
const USER_LS = "currentUser",
SHOWING_CN = "showing";
function paintGreeting(text){
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello ${text}`;
}
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null){
} else {
paintGreeting(currentUser);
}
}
function init(){
loadName();
}
init();
๋ฐ์ํ
๋๊ธ