[JS] Quotes & Background 구현

# Quotes

 

Math.random(); -> 0.0 ~ 1.0 사이의 랜덤한 값을 반환해준다.
0~10 사이의 랜덤한 숫자를 보고 싶으면 저기에 *0 을 하면 된다.

Math.random()*10;  //-> 3.2325817958 로 나옴.

이때, 뒤에 있는 소수점을 없애 정수로 만들어주고 싶다면, 세 가지의 방법이 있다.

1. Math.ceil(1.0001); -> 올림

Math.ceil(1.1); // => 2 Math.ceil(1.0)만이 1임 나머지는 다 올림 처리

2. Math.round(1.0001); -> 반올림
3. Math.floor(1.0001); -> 내림.(뒤에 소수점 무시해줌)

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

이 부분에서 왜 [] 대괄호를 써야 하는지 궁금했는데,

일단 저 quotes가 array니까 array에서 순서를 가져올 때, [] 여기에 숫자가 들어가야 하는데,

이번 강의의 경우 그 숫자를 랜덤으로 해주었기에 대괄호 속에 저런 코드들이 들어가게 된 것.

 

 

 

[html]

    </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>
  </body>
</html>

 

[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

 

document.body.style.backgroundImage = `url('img/${chosenImage}')`;

-> 배경 자체를 body에 backgroundImage를 줘서 처리

 

이미지 파일명을 배열에 등록할 때 하드코딩 안하게:

const images = [];
for(i=1; i let counted = i
images.push(` (${counted}).jpg`)
}

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

-> JavaScript에서 img태그를 생성할 수 있다. (요소를 만들고)

 

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

-> src 속성에 경로를 넣어줄수도 있다.

src에 스트링으로 생성해서 console.log(bgImage);

 

document.body.appendChild(bgImage);

-> 생성한 img태그인 bgImage를 html에 추가시킴으로써 존재가능. (자식 추가)

 

 

[html]

<h1 class="hidden" id="greeting"></h1>
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
  </body>
</html>

 

[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);