nomard crome app 5

quote

HTML

<div id="quote">
    <span></span>
    <span></span>
</div>

JS

const quotes = [
{
    quote: "something1",
    author: "someone1",
},
{
    quote: "something2",
    author: "someone2",
},
{
    quote: "something3",
    author: "someone3",
},
// more ...
];
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;

---

img

const images = ["1.jpg", "2.jpg"];

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

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

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

console.log(bgImage); // <img src="img/1.jpg">

img 폴더 안에 1.jpg, 2.jpg 파일을 넣는다.

JS에서 html element를 만들었다. 비록 “img/1.jpg”는 text일 뿐지이지만

document.body.appendChild(bgImage);

바디에 JS코드를 추가하는 코드

Elements를 확인하면 body에

<img src="img/1.jpg">

가 추가된 것을 확인할 수 있다.