Frontend/JavaScript

바닐라 JS로 크롬 앱 만들기 (#6 QUOTES AND BACKGROUND)

:_: 2022. 4. 22. 10:02

 

 

Quotes

quotes.js 를 만들고 quotes 배열에 명언을 넣어서 랜덤으로 출력

 

index.html

<!DOCTYPE html>
<html lang="ko">
<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>MOMENTUM App</title>
</head>
<body>
    <form id="login-form" class="hidden">
        <input type="text" placeholder="what is your name?"/>
        <button>Lon In</button>
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 id="greeting" class="hidden"></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>
</body>
</html>

 

quotes.js 

const quotes = [
    {
        quote: "The greatest glory in living lies not in never falling, but in rising every time we fall",
        author: "Nelson Mandela",
    },
    {
        quote: "Never let the fear of striking out keep you from playing the game.",
        author: "Babe Ruth",
    },
    {
        quote: "Life is either a daring adventure or nothing at all.",
        author: "Helen Keller",
    }
    ... 총 10개 추가
]

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

console.log(quotes[0]); // 첫번째 명언 가져옴

// round() : 반올림
// ceil() : 1.0 만 1이 될 수 있고 1.01만 되도 2가 출력
// floor() :  버림, 1.9 가 1로 출력

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 

이미지 랜덤으로 넣기

img 폴더를 만들어서 무료 이미지 3개 넣어줌

const images = ["1.jpg","2.jpg","3.jpg"];

// 랜덤한 숫자에 images 길이만큼 곱해서 floor  
const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;

// body에 html 추가
document.body.appendChild(bgImage);

 

 

' 노마드 코드 -  바닐라 JS로 크롬 앱 만들기' 공부하면서 정리한 내용입니다.
728x90