노마더코더 크롬 앱 만들기 : Background, Quotes

새로고침마다 바뀌는 화면 및 명언

quotes html

    <div id="quote">
        <span></span>
        <span></span>
    </div>

quotes JS

const quotes = [
    {
      quote: "The way to get started is to quit talking and begin doing.",
      author: "Walt Disney",
    },
    {
      quote: "Life is what happens when you're busy making other plans.",
      author: "John Lennon",
    },
    {
      quote:
        "The world is a book and those who do not travel read only one page.",
      author: "Saint Augustine",
    },
    {
      quote: "Life is either a daring adventure or nothing at all.",
      author: "Helen Keller",
    },
    {
      quote: "To Travel is to Live",
      author: "Hans Christian Andersen",
    },
    {
      quote: "Only a life lived for others is a life worthwhile.",
      author: "Albert Einstein",
    },
    {
      quote: "You only live once, but if you do it right, once is enough.",
      author: "Mae West",
    },
    {
      quote: "Never go on trips with anyone you do ntot love.",
      author: "Hemmingway",
    },
    {
      quote: "We wander for distraction, but we travel for fulfilment.",
      author: "Hilaire Belloc",
    },
    {
      quote: "Travel expands the mind and fills the gap.",
      author: "Sheda Savage",
    },
];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

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

background JS

// images라는 배열에 이미지를 넣고
const images = ["0.jpeg", "1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg",];


const chosenImage = images[Math.floor(Math.random() * images.length)]; //랜덤으로 이미지 뽑기 

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage).classList.add("bgImage")

배운것들

• Math는 수학적인 상수와 함수를 위한 속성과 메서드의 객체이다, 함수 객체는 아님
• Math.floor()함수는 소수점을 버린다.

Math.floor(5.29) = 5

• 추가로
  

Math.round() : 소수를 반올림하여 정수로 바꿔주는 함수
ex) Math.round(1.8) = 2

Math.ceil() : 숫자를 천장까지 올려준다.(올림한다)
ex) Math.ceil(1.1) = 2

Math.floor() : 숫자를 바닥까지 내려준다. (내림한다)
ex) Math.floor(1.9) = 1
등이 있다.

• Math.random() 은 0~1(1은 미포함) 구간에서 부동소수점의 난수를 생성

const rand1 = Math.random();
const rand2 = Math.random();
const rand3 = Math.random();

0.2646510833006713
0.39351197828338647
0.73305185339113125

• appendChild()는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.

const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
// body에 bgImage요소를 넣고 그안에 클래스 bgImage를 추가한다.
document.body.appendChild(bgImage).classList.add("bgImage")