꿈꾸는 새벽하늘

[노마드코더] JavaScript (4) 본문

💻 Programming

[노마드코더] JavaScript (4)

rovemin 2022. 6. 29. 11:13

[노마드코더] 바닐라 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);
저작자표시

'💻 Programming' 카테고리의 다른 글

[Python] 파이썬 기본 문법 총정리 1 - 자료형(Data Type): 숫자형, 문자열  (0) 2022.07.31
[노마드코더] JavaScript (5)  (0) 2022.06.29
[노마드코더] JavaScript (3)  (0) 2022.06.28
[노마드코더] JavaScript (2)  (0) 2022.06.23
[노마드코더] JavaScript (1)  (0) 2022.06.23
'💻 Programming' Related Articles more