기록하는 개발자

[VanillaJS] Google Chrome App Momentum 만들기 - 3-1. Random Quotes 본문

Web/Javascript

[VanillaJS] Google Chrome App Momentum 만들기 - 3-1. Random Quotes

밍맹030 2021. 8. 3. 17:04
728x90

10개의 명언 중 랜덤하게 하나를 골라 명언과 출처를 출력하는 js를 적용해보자.

 

< HTML >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet", href="css/style.css">
    <title>Momentum</title>
</head>
<body>
    <!--input의 유효성 검사를 작동시키기 위해서는 form 태그를 사용해야한다.-->
    <form class="hidden" id="login-form"> 
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log in</button>
    </form>

    <h2 id="clock"> 00:00:00</h2>
    <h1 class="hidden" id="greeting"></h1>
    <br>
    <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>

 

< quotes.js >

const quotes = [
    {
        quote : "Laughter is timeless, Imagination has no age. And dreams are forever.",
        author : "Walt Disney",
    },
    {
        quote : "The past can hurt, but the way I see it, you can either run from it or learn from it.",
        author : "Lion King",
    },
    {
        quote : "You must not let anyone define your limits because of where you come from. Your only limit is you soul.",
        author : "Ratatouille",
    },
    {
        quote : "Sometimes the smallest things take up the most room in your heart.",
        author : "Winnie the Pooh",
    },
    {
        quote : "Life is a journey to be experienced, not a problem to be solved.",
        author : "Winnie the Pooh",
    },
    {
        quote : "Anyone can be anything. Nobody can say to me what I should do or not with my dreams!",
        author : "zootopia",
    },
    {
        quote : "The only thing we have to fear is fear itself.",
        author : "zootopia",
    },
    {
        quote : "Don’t close your eyes and look straight ahead. The reality of fear can be different from what you think.",
        author : "Finding Nemo",
    },
    {
        quote : "No more hiding, Dante. I gotta seize my moment!",
        author : "Coco",
    },
    {
        quote : "Success is not given for free. You have to be able to do anything for your goals.",
        author : "Coco",
    },
];

//querySelector(.class)
//querySelector(#id)
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;

 

- 객체 type의 배열 quotes에 quote와 author 리스트를 저장한다.

- Math 라이브러리의 floor와 random 함수를 이용해 랜덤하게 index 하나를 꺼낸다.

- index에 해당되는 quote의 객체를 todaysQuote에 저장한다.

- quote와 author의 innerText를 저장된 todaysQuote 내 quote와 author로 지정해준다.

 

 

Math.random*n : 0부터 n-1까지의 수 중 랜덤하게 return

Math.round(n) : n을 반올림
ex) Math.round(1.8) → 2

Math.floor(n) : n을 내림
ex) Math.floor(1.8)  → 1

Math.ceil(n) : n을 올림
ex) Math.ceil(1.1)  → 2

 

728x90
저작자표시

'Web > Javascript' 카테고리의 다른 글

[VanillaJS] Google Chrome App Momentum 만들기 - 4-1. Checklist Load  (0) 2021.08.04
[VanillaJS] Google Chrome App Momentum 만들기 - 3-2. Random Background Image  (0) 2021.08.03
[VanillaJS] Google Chrome App Momentum 만들기 - 2. Clock  (0) 2021.08.03
[Vanilla JS] Google Chrome App Momentum 만들기 - 1. Log In  (0) 2021.08.02
[JavaScript] JS Event 처리(onClick)  (0) 2021.08.02
'Web/Javascript' Related Articles more