노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - 랜덤 배경, 랜덤 명언

새로고침할 때마다 배경 바꾸기

const images = ["0.png","1.png","2.png","3.jpg","4.png"];

const chosenImage = images[Math.floor(Math.random() * images.length)];
//images[내림(랜덤 숫자 * images의 길이)];

const bgImage = document.createElement('img'); //이미지 태그 추가

bgImage.src = `img/${chosenImage}`; //이미지 경로
bgImage.classList.add('bg_img');  

document.body.appendChild(bgImage); body 안에 자식요소로 이미지태그

추가된 이미지태그

새로고침할 때마다 명언 바꾸기

 

const quotes = [
    {
        quote: "노력 없이 얻는 것은 성취감이 없다.",
        author: "Thomas Edison"
    },
    {
        quote: "목표를 세우고 그 목표를 이루기 위해 최선을 다하라. 당신이 할 수 있다고 믿을 때, 당신은 이미 반 이상 성공한 것이다.",
        author: "Theodore Roosevelt"
    },
    {
        quote: "성공은 결코 최종 목표가 아니라, 실패에서 실패로 걸어가는 과정에서 온다.",
        author: "Winston Churchill"
    },
    {
        quote: "당신이 세상을 변화시키려고 기다린다면, 당신은 아무것도 이룰 수 없다. 변화는 당신으로부터 시작되어야 한다.",
        author: "Mahatma Gandhi"
    },
    {
        quote: "가장 훌륭한 시간은 언제인가? 10년 전이었다. 다음으로 좋은 시간은 오늘이다.",
        author: "ssssss"
    },
];

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

const todayQuote = quotes[Math.floor(Math.random() * quotes.length)]

quote.innerText = todayQuote.quote;
author.innerText = todayQuote.author;

배경 바꾸는 거랑 큰차이 없음