8. Quotes And Background (Quotes)

- HTML -

quote라는 박스안에

span 두개를 넣어줌.

이 span은 각 명언과 작가이름이 생길 자리임.

새로 만든 js파일도 작성해줌.

 

 

 

- JS -

const quotes = [
{
quote: "  ",
author: "  ",
},

.

.

.
{
quote: "  ",
author: "  ",
},
]; 를 하여

quotes에 명언들을 배열함.

원하는 만큼 만들면 됨.

const quote = document.querySelector("#quote span:first-child"); 를 하여

quote에 html의 quote의 span:first-child를 넣어줌.
const author = document.querySelector("#quote span:last-child"); 를 하여

author에 html의 quote의 span:last-child를 넣어줌.
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; 를 하여

todaysQuote에 quotes를 랜덤으로 하나 나타내게 함.

quotes[Math.floor(Math.random() * quotes.length)]를 하여

quotes의 배열을

Math.random() * quotes.length 를 하여

quotes.length 만큼 랜덤으로 하나 뽑게 하고

Math.floor(Math.random() * quotes.length) 를 하여

Math.random() * quotes.length 의 값을 반내림 하게함.

 

Math.random() 은 0부터 1사이의 랜덤한 숫자를 제공함.

ex) 0 / 0.12434 / 0.4654857 / 1

이는 Integer인 정수가 아니라 소숫점을 가지는 float 임.

 

float인 Math.random()값의 소숫점을 지우기 위해

Math.floor 를 하여 반내림을 함.

 

Math.floor -> 정수 내림

ex) 2.3 -> 2 / 3.5 -> 3

Math.cill -> 정수 올림

ex) 2.3 -> 3 / 3.5 -> 4

Math.round -> 반올림

ex) 2.3 -> 2 / 3.5 -> 4

quote.innerText = todaysQuote.quote;  를 하여

quote의 innerText에 todaysQuote의 quote를 넣어줌.
author.innerText = todaysQuote.author;

author의 innerText에 todaysQuote의 author를 넣어줌.

 

 

 

- 화면 -

 

 

새로고침할 때마다 명언과 작가가 바뀌며 나타남.