노마드코더 JS로 크롬앱만들기) #6 QUOTES AND BACKGROUND - Math, createElement, appendChild

■ 랜덤 명언 코딩

 

Math.random() : 0~1 사이 숫자를 랜덤으로 반환한다.

Math.round(숫자) : 숫자를 반올림한다.

Math.ceil(숫자) : 숫자를 올림한다.

Math.floor(숫자) : 숫자를 내림한다.

// quotes.js
const quotes = [
    {
        quote: "약한 자일수록 상대를 용서하지 못한다.용서한다는 것은 강하다는 증거다.",
        author: "- 마하트마 간디"
    },

    {
        quote: "보이지 않는 곳에서 친구를 좋게 말하는 사람이야말로 신뢰할 수 있다.",
        author: "- 영국의 신학자 풀러"
    },

    {
        quote: `하루만 행복하고 싶다면, 이발소를 가라.
        일주일만 행복하고 싶다면, 차를 사라.
        한달만 행복하고 싶다면, 결혼을 해라.
        일년만 행복하고 싶다면, 집을 사라.
        일평생 행복하고 싶다면, 정직해져라.`,
        author: "- 서양의 속담"
    },

    {
        quote: "꿈은 도망가지 않는다.도망치는 건 언제나 자신이다.",
        author: "- 일본의 사업가 콘도 타카미"
    },

    {
        quote: "할 수 있다고 생각하니까 할 수 있는거다.",
        author: "- 고대 로마의 시인 베르길리우스"
    },

    {
        quote: "학교에서 성적이 좋다고 해서 사회에서 인정받는다고는 할 수 없다.",
        author: "- 고대 그리스의 우화 작가 아이소포스"
    },

    {
        quote: `생각이 행동을 바꾸고
        행동이 인생을 바꾼다`,
        author: "- 부동산 읽어주는 남자"
    },

    {
        quote: `언젠가 잘리고
        회사는 망하고
        우리는 죽는다`,
        author: "- 무빙워터"
    },

    {
        quote: "네가 언젠가 죽는다는 것을 기억하라(메멘토 모리)",
        author: "- 고대 로마 개선장군에게"
    },

    {
        quote: `당신의 삶을 오늘 바꾸어라
        미래에 걸지 말아라
        미루지 말고 지금 행동하라`,
        author: "- 시몬 드 보부아르"
    }
];

const quote = document.querySelector("#quote span:nth-child(1)");
const author = document.querySelector("#quote span:nth-child(2)");

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 

---

 

■ 랜덤 이미지 코딩

 

document.createElement("img") : <img> 태그를 생성한다. html 태그 어떤것이든 들어올 수 있다.

document.body.appendChild(태그) : 태그를 body에 추가한다.

// background.js
const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"];

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

const bgImage = document.createElement("img");

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

document.body.appendChild(bgImage);