[노마드코더]바닐라JS로 크롬 앱 만들기 (29)Math.random 이용해서 quote 불러오기

index.html에서 #22~#25 를 통해 quote를 생성할 공간을 만든다.

각각 quote와 author의 span을 만든다.

 

quotes.js에서 #1~#42 를 통해 기본 제공하는 quote array를 입력한다.

quote array는 제일 마지막에 코드를 공유해두었다.

 

#44~#45 를 통해 index.html에서 querySelector를 이용하여 span을 불러온다.

 

#47 에서 Math.random()을 이용해서 quote를 선택한다.

Math.random : 0부터 1 사이의 랜덤한 숫자를 제공

우리는 0부터 9 사이의 숫자가 필요하기 때문에, Math.random * 10 을 한다.

Math.round : 숫자를 반올림

Math.ceil : 숫자를 올림(천장까지 높여줌)
Math.floor : 숫자를 내림(바닥까지 낮춰줌)

 

#49~#50 에서 quote와 author의 innerText를 #47 에서 random으로 선택한 quote, author로 바꿔준다.

새로고침할 때마다 quote와 author가 바뀐다

const quotes = [
    {
    quote: 'I never dreamed about success, I worked for it',
    author: 'Estee Lauder'
    },
    {
    quote: 'Do not try to be original, just try to be good.',
    author: 'Paul Rand'
    },
    {
    quote: 'Do not be afraid to give up the good to go for the great',
    author: 'John D. Rockefeller'
    },
    {
    quote: 'If you cannot fly then run. If you cannot run, then walk. And if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.',
    author: 'Martin Luther King Jr.'
    },
    {
    quote: 'Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.',
    author: 'Thomas Edison'
    },
    {
    quote: 'The fastest way to change yourself is to hang out with people who are already the way you want to be',
    author: 'REid Hoffman'
    },
    {
    quote: 'Money is like gasoline during a road trip. You do not want to run out of gas on your trip, but you are not doing a tour of gas stations',
    author: 'Tim O Reilly'
    },
    {
    quote: 'Some people dream of success, while other people get up every morning and make it happen',
    author: 'Wayne Huizenga'
    },
    {
    quote: 'The only thing worse than starting something and falling.. is not starting something',
    author: 'SEth Godin'
    },
    {
    quote: 'If you really want to do something, you will find a way. If you do not, you will find an excuse.',
    author: 'Jim Rohn'
    },
];