[바닐라 js 챌린지] 6.0강 Math.random(), Math.floor() ✨

6.0강은 명언파트다  !
홈페이지를 새로고침할때마다 다양한 명언들이 랜덤으로 뜨는 걸 구현해볼거다.

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

우선 html에 명언과 작가의 이름을 넣게끔 <div>, <span>태그를 생성해준다.

const quotes = [
  {
    quotes: "이 세상에 위대한 사람은 없다. 단지 평범한 사람들이 일어나 맞서는 위대한 도전들이 있을 뿐이다.",
    author:"윌리엄 프레데릭 홀시",
  },
  {
    quotes:"해보지 않고는 당신이 무엇을 해낼 수 있는지 알 수 없다.",
    author: "프랭클린 아담",
  },
  {
    quotes:"위대한 업적은 대개 커다란 위험을 감수한 결과이다",
    author:"헤로도토스",
  },
  ];  // 명언 준비

실제로는 명언을 한 10개 정도 준비했는데 다 적기에는 많아서 세개만 적어줬다 !

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

이제 명언을 0번부터 2번까지 불러와야되는데 지금은 세개밖에 없어서 직접 쓸 수 있겠지만 나중에는

더 많은 명언들이 있을거기때문에  MathModule을 이용해 볼 것이다.  (MathModule말고도 Math관련 함수들이 많은데 다음에 정리하는 날이 오기를 ..!)

Math.random()

Math.random()은 0에서 1까지의 숫자를 랜덤을 제공하는 함수다. 우린 3개의 명언이 있으니 *3을 해줄것이다.

그리고 실수가 나오기때문에 반올림을 해서 정수로 변경도 해야한다.

실수 -> 정수로 변경해주는 메서드 ✨

1.     Math.round() :

반올림을 해주는 함수
ex) 1.1 -> 1 , 1.5 -> 2

2.     Math.celi() :

올림을 해주는 함수 
ex) 1.1 -> 2

3.     Math.floor() :

값을 내려주는 함수
ex) 1.9 -> 1

Math.floor(Math.random() * 3);

 이제 이걸 그대로 적용해서 명언을 출력해보자 !

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

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

* 3을 안해준 이유는 매번 명언의 숫자를 셀 수 없으니 길이를 구해주는 .length를 대신 사용하였다.

 

이제 새로고침할때마다 뜨는 명언들을 볼 수 있다 !