[바닐라JS로 크롬앱 만들기] #6 [2021 UPDATE] QUOTES AND BACKGROUND

#6.0 Quotes

Math.random() 은 0과 1사이의 정수를 반환한다.

Math.floor() 소수점 버림 
Math.ceil() 올림
Math.round() 반올림

const quotes = [
    {
        quote: "삶이 있는 한 희망은 있다",
        author: "키케로"
    },
    {
        quote: "산다는것 그것은 치열한 전투이다.",
        author: "로망로랑"
    },
    {
        quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.",
        author: "사무엘존슨"
    },
    {
        quote: "언제나 현재에 집중할 수 있다면 행복할 것이다.",
        author: "파울로 코엘료"
    },
    {
        quote: "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해",
        author: "찰리 채플린"
    },
    {
        quote: "직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다.",
        author: "엘버트 허버드"
    },
    {
        quote: "행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가 우리를 향해 열린 문을 보지 못하게 된다",
        author: "헬렌켈러"
    },
    {
        quote: "피할수 없으면 즐겨라",
        author: "로버트 엘리엇"
    },
    {
        quote: "단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가?",
        author: "이드리스 샤흐"
    },
    {
        quote: "너무 소심하고 까다롭게 자신의 행동을 고민하지 말라 . 모든 인생은 실험이다 . 더많이 실험할수록 더나아진다",
        author: "랄프 왈도 에머슨"
    }
];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

let sequence = Math.floor(Math.random()*quotes.length);
const todaysQuote = quotes[sequence].quote;
const todaysAuthor = quotes[sequence].author;
quote.innerText = todaysQuote;
author.innerText = `- ${todaysAuthor}`;

#6.1 Background

 

#6.1 Background

document.createElement("img");

이렇게 작성하면 javascript 내에 존재하지, html 내에 존재하는 것은 아님

document.body.appendChild(image);

img 태그를 바디 내부에 추가

#6.2 Recap

appendChild()
createElement("")

Math.random()