[Nomad/바닐라 JS Challenges] 8일차 | Ch01 QUOTES AND BACKGROUND

참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby

 

0. Quotes  

---

 

index.html

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

...

<script src="js/quotes.js"></script>

👉🏻명언이 들어갈 자리와 해당 이벤트를 처리할 js를 불러온다.

const quotes = [
    {
      quote: "The way to get started is to quit talking and begin doing.",
      author: "Walt Disney",
    },

	...
  ];
  
  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;

👉🏻Math는 JS에서 기본으로 제공하는 라이브러리이다.

• random: 1이하의 숫자 중 무작위로 숫자를 뽑아준다. 명언의 개수만큼 곱해주면 0부터 명언 개수 내에서 무작위 숫자를 뽑는다.
• round: 반올림
• ceil: 올림
• floor: 내림

 

1. Background

---

 

background.js

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

const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");

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

document.body.appendChild(bgImage);

👉🏻createElement로 HTML 요소를 만들어준다.

👉🏻append로 만든 요소를 삽입한다.