[Memo] #6 Quotes and Background

---

💛 6.0 Quotes

 

🔷 Math.random()

• 0~1 사이 숫자 랜덤 하게 줌

// 반올림
Math.round(Math.random() * 30)
// 올림
Math.ceil(Math.random() * 30)
// 내림
Math.floor(Math.random() * 30)

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;

 

 

 

 

---

---

💛 6.1 Background

🔷 createElement()

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

// console.log(chosenImage);

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

 

 

🔷 document.body.appendChild()

appendChild() : html을 추가해줌

bgImage.src = `img/${chosenImage}`;
//console.log(bgImage); // <img src="img/2.jpg>"

document.body.appendChild(bgImage);
// document.body.prepend(bgImage);

• append는 가장 뒤에
• prepend는 가장 위에

 

 

본 포스팅은 nomadcoder '바닐라 JS로 크롭 앱 만들기' 강의를 듣고 메모한 글 입니다.