JavaScript 인용구 랜덤으로 출력하기

🟰위와 같이 새로고침을 할 때 자동으로 다음 인용구가 랜덤으로 나오도록 만들어보는 연습을 하려고 한다.

⏬준비할 html코드(id가 quote인 div태그안의 span태그에 인용구를 넣으려고 한다)

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

⏬JS코드 ( quotes값에 넣고자 하는 인용구와 text를 넣어준다.)

🔆quote안의 두개의 span 을 first-child, last-child를 통해 불러온다
🔆Math.random()을 통해 랜덤정수를 가져온다.(quotes.length를 곱해서 해당 길이만큼 범위를 확장)
🔆Math.floor를 통해 소수점을 버린다. Math.random은 double타입으로 나오기 때문
🔆그렇게 생성된 랜덤 인덱스에 해당하는 quote와 text를 각 span에 넣어주기만 하면 끝!

const quotes = [
    {
        quote : "죽고자 하면 살것이다.",
        text : "이순신",
    },
    {
        quote : "백문이 불여일문",
        text : "사자성어",
    },
    {
        quote : "사랑은 은하수 다방에서 만나",
        text : "10cm",
    },
    {
        quote : "이건 사랑이 아냐 이건 운명이 아냐 그냥 정이라고 하자",
        text : "Big Naughty",
    },
    {
        quote : "총 맞은 것처럼",
        text : "백지영",
    }
]

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.text;
/* Math.random은 0~1사이의 랜덤 실수를 제공한다. */

/** Math.round()는 반올림 함수 
 * Math.ceil()은 올림 함수
 * Math.floor()은 내림 함수
*/