[노마드코더] 바닐라 JS로 크롬 앱 만들기
1. 로그인 기능
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="css/style.css">
<title>Plan Your Day</title>
</head>
<body>
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In"/>
</form>
<h1 class="hidden" id="greeting"></h1>
<script src="js/greetings.js"></script>
</body>
</html>
CSS
.hidden {
display: none;
}
JavaScript
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);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
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
paintGreetings(savedUsername);
}
2. Clock 기능
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="css/style.css">
<title>Plan Your Day</title>
</head>
<body>
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In"/>
</form>
<h2 id="clock">00:00:00</h2>
<h1 class="hidden" id="greeting"></h1>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
</body>
</html>
CSS
.hidden {
display: none;
}
JavaScript
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
3. Random한 Quote & Background 기능
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="css/style.css">
<title>Plan Your Day</title>
</head>
<body>
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In"/>
</form>
<h2 id="clock">00:00:00</h2>
<h1 class="hidden" id="greeting"></h1>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/backgroud.js"></script>
</body>
</html>
CSS
.hidden {
display: none;
}
JavaScript
const quotes = [
{
quote: "It's not until you lose everything that you can truly appreciate everything.",
movie: "Beauty and the Beast",
},
{
quote: "To love someone, you have to love yourself first.",
movie: "Beauty and the Beast",
},
{
quote: "Get out of the place you're used to. The reward for this will definitely be worth it.",
movie: "Tangled",
},
{
quote: "Remember you're the one who can fill the world with sunshine.",
movie: "Snow White",
},
{
quote: "There is no one who can't fall. However, only those who get up again will learn how to move forward.",
movie: "Bambi",
},
{
quote: "You still have enough time to make your dreams come true!",
movie: "Peter Pan",
},
{
quote: "You can do it if you sincerely want.",
movie: "The Little Mermaid",
},
{
quote: "The special moments of today are memories of tomorrow.",
movie: "Aladdin",
},
{
quote: "Only I can determine my own mood. And today, perhaps, I will choose happiness.",
movie: "Alice in Wonderland",
},
{
quote: "If you do only what you can, you'll never be better than now.",
movie: "Kung Fu Panda",
}
];
const quote = document.querySelector("#quote span:first-child");
const movie = document.querySelector("#quote span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
movie.innerText = todaysQuote.movie;
const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);'3-2기 스터디 > 프론트엔드 입문' 카테고리의 다른 글
| [9주차] JavaScript (5) (0) | 2022.06.30 |
|---|---|
| [7주차] JavaScript (3) (0) | 2022.06.30 |
| [6주차] JavaScript (2) (0) | 2022.06.23 |
| [5주차] JavaScript (1) (0) | 2022.06.23 |
| [4주차] CSS (2) (0) | 2022.06.21 |
댓글