QUOTES AND BACKGROUND _ 노마드코더 _ 바닐라JS크롬앱만들기

노마드코더 바닐라 JS로 크롬 앱 만들기 강의를 듣고 정리한 기록입니다. 아래 내용은 6.0 - 6.1 에 해당합니다.

6.0 Quotes

배열안에 객체형태로 명언을 담고, 화면에 랜덤하게 띄워주는 코드를 작성합니다.

// 이렇게 데이터를 준비하고
const quotes = [
	{ 
		quote: "Life is good",
		autor: "Walt",
	},
	{ 
		quote: "what your name",
		autor: "hienz",
	},
	...
]

html 을 작성하고 js 로 해당 태그를 가져옵니다.

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

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

이제 Math module 을 사용해 랜덤하게 정보를 가져오는 코드를 작성합니다.

Math.random() // 0-1 사이 랜덤한 숫자
Math.round() // 반올림
Math.ceil() // 무조건 올림
Math.floor() // 내림

Math.floor(Math.random() * 10) 
// 이렇게 하면 0-9 사이 숫자가 랜덤하게 나온다.

quotes[Math.floor(Math.random() * quotes.length)]
// 배열의 길이에 맞게 랜덤한 값을 넣어준다.
// 배열 길이 3이면 0 < x < 1 의 모든 항에 3이 곱해져서 0 < x < 3 이 되는 것

이제 변수로 설정하고 해당 태그에 innerText 로 넣어줍니다.

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

quote.innerText = todaysQuote.quote;
quote.innerText = todaysQuote.author;

6.1 Background

랜덤 숫자로 이미지를 랜덤하게 고르고, 그 이미지를 바디에 추가하는 코드를 작성합니다.
우선 이미지의 이름(확장자명까지)을 배열로 담고, 그 배열을 랜덤하게 불러줍니다.

const iamge = ["0.jpeg", "1.jpeg", "2.jpeg"]

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

이제 html 에 img 태그를 넣습니다. createElement appenChild 를 사용해 <img src="img/0.jpeg"/> 이런 형태로 추가합니다.

// img 태그를 새롭게 생성하고
const bgImage = document.createElement("img");

// 만든 태그에 src 속성 값을 추가하고
bgImage.src = `img/${chosenImage}`

// 이 태그를 body 에 추가한다.
document.body.appendChild(bgImage);