본문 바로가기
Dev/JavaScript

[JavaScript] Momentum App - 3. Quotes and Background

by 코딩삐약 2022. 5. 2.

// quotes.js

const quotes = [
{
    quote: "Love For All, Hatred For None.",
    author: "Khalifatul Masih III"
},
{
    quote: "Change the world by being yourself.",
    author: "Amy Poehler"
},
{
    quote: "Every moment is a fresh beginning.",
    author: "T.S Eliot"
},
{
    quote: "Never regret anything that made you smile.",
    author: "Mark Twain"
},
{
    quote: "I don’t need it to be easy, I need it to be worth it. ",
    author: "Lil Wayne"
},
{
    quote: "Determine your priorities and focus on them.",
    author: "Eileen McDargh"
},
{
    quote: "Tough times never last but tough people do. ",
    author: "Robert H. Schiuller"
},
{
    quote: "Turn your wounds into wisdom.",
    author: "Oprah Winfrey"
},
{
    quote: "Embrace the glorious mess that you are.",
    author: "Elizabeth Gilbert"
},
{
    quote: "The true meaning of life is to plant trees, under whose shade you do not expect to sit.",
    author: "Nelson Henderson"
}
]

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

//Math.floor() 숫자 내림. Math.random()* 숫자 0-숫자 사이의 무작위 숫자
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; //랜덤한 숫자를 Array의 Index로 사용

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

// background.js

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

const chosenImage = images[Math.floor(Math.random() * images.length)];

//js에서 element 생성해 html에 추가
const bgImage = document.createElement("img");
//src 설정
bgImage.src=`./img/${chosenImage}`;
//body에 HTML 추가
document.body.appendChild(bgImage);