[노마드코더] 바닐라JS 공부 6일차(Quotes and Background: Math객체 난수)

Javascript

by 래모 2022. 1. 11. 23:37

Math 객체

대표적인 메소드

함수명	설명
min()	인수로 전달받은 값 중 가장 작은 수 반환
max()	인수로 전달받은 값 중 가장 큰 수 반환
random()	무작위 숫자 반환 ( random()*10 = 0~9 )
round()	인수로 전달받은 값을 소수점 첫 번쨰 자리에서 반올림하여 반환
floor()	인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수 반환( floor(11.01) = 11 )
ceil()	인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수 반환( ceil(11.01) = 12 )
sin()	인수로 전달받은 값의 사인(sin)함수 값을 반환
PI	원주율 제공

index.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">
    <title>Momentum App</title>
    <link rel = "stylesheet" href = "style.css">
    <style>
        .hidden { 
            display: none;
        }
        img {
            height: 800px;
        }
    </style>
</head>
<body>
    <form class = "hidden" id = "login-form">
        <input required maxlength = "15" type = "text" placeholder = "What is your name?"/>
        <button>Log In</button>
    </form>
    <h1 id = "greeting" class = "hidden"></h1>
    <h2 id="clock">00:00:00</h2>
    <div id="quote">
        <span></span>
        <span></span>
    </div>
    
    <script src = "js/clock.js"></script>
    <script src = "js/greeting.js"></script>
    <script src = "js/quotes.js"></script>
    <script src = "js/background.js"></script>
</body>
</html>

quotes.js

const quotes = [
    {
      quote: "The way to get started is to quit talking and begin doing.",
      author: "Walt Disney",
    },
    {
      quote: "Life is what happens when you're busy making other plans.",
      author: "John Lennon",
    },
    {
      quote:
        "The world is a book and those who do not travel read only one page.",
      author: "Saint Augustine",
    },
    {
      quote: "Life is either a daring adventure or nothing at all.",
      author: "Helen Keller",
    },
    {
      quote: "To Travel is to Live",
      author: "Hans Christian Andersen",
    },
    {
      quote: "Only a life lived for others is a life worthwhile.",
      author: "Albert Einstein",
    },
    {
      quote: "You only live once, but if you do it right, once is enough.",
      author: "Mae West",
    },
    {
      quote: "Never go on trips with anyone you do ntot love.",
      author: "Hemmingway",
    },
    {
      quote: "We wander for distraction, but we travel for fulfilment.",
      author: "Hilaire Belloc",
    },
    {
      quote: "Travel expands the mind and fills the gap.",
      author: "Sheda Savage",
    },
];

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;

background.js

const images = [
    "0red.jpg", 
    "1orange.jpg", 
    "2yellow.jpg", 
    "3green.jpg", 
    "4blue.jpg", 
    "5navy.jpg", 
    "6purple.jpg"
];

const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img"); // 새로운 요소 생성

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);

'Javascript' 카테고리의 다른 글

[노마드코더] 바닐라JS 공부 8일차 (Weather) (0)	2022.01.17
[노마드코더] 바닐라JS 공부 7일차(To Do List) (0)	2022.01.15
[노마드코더] 바닐라JS 공부 5일차(clock :setInterval, setTimeout, Date 객체, padStart) (0)	2022.01.11
[노마드코더] 바닐라JS 공부 4일차(Login 구현:preventDefault, localStorage) (0)	2022.01.04
[노마드코더] 바닐라JS 공부 3일차(JS에서 HTML에 접근, event) (0)	2022.01.02