Quotes 랜덤으로 넣기

명언들 랜덤으로 화면에 띄워주기

quotes.js 내에 object가 모인 array를 만들어준다.
ex)

const quotes = [
	{quotes : "명언",
    	author : "작가이름"},
        {quotes : "명언"2,
    	author : "작가이름2"}
        {quotes : "명언3",
    	author : "작가이름3"}
        {quotes : "명언4",
    	author : "작가이름4"} ]
        

html 내에 인용문 넣을 자리를 만들어준다.

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

랜덤으로 명언들을 화면에 띄우기 위해서는 먼저 랜덤으로 명언들을 호출할 수 있어야 한다.

10개의 명언이 있다면, quote[] 괄호 내에 0~9사이의 숫자가 들어갈 수 있다.

Math Module

Math module 내에는 많은 function 이 있다.

• Math.random() : 0-1 사이의 숫자를 random으로 제공하는 함수.
  Math.random()*10 을 통해 랜덤으로 0-10 사이의 숫자를 얻을 수 있다.

• Math.round() : 소수를 반올림하여 정수로 바꿔주는 함수
  ex) Math.round(1.8) = 2
  

• Math.ceil() : 숫자를 천장까지 올려준다.(올림한다)
  ex) Math.ceil(1.1) = 2

• Math.floor() : 숫자를 바닥까지 내려준다. (내림한다)
  ex) Math.floor(1.9) = 1

즉 Math.floor(Math.random()*10) 을 통해 0에서 9사이의 정수 값을 랜덤으로 얻을 수 있다. 이를 quote 괄호 내애 넣어서 변수를 만들어준다.

const todaysQuote = quote[Math.floor(Math.random()*quote.length) ];

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

Background 랜덤으로 넣기

먼저 img folder 에 랜덤으로 배경에 넣고 싶은 이미지들을 저장한다.

background.js 내에

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

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

여기서 직접 html의 element 인 img를 만들어줄 수 있다.

createElement()

createElement는 직접 js에서 html의 element를 추가해줄 수 있다.

const bgimage = document.creatElement("img");
bgimage.src = `img/${chosenImage}`;

위 코드를 통해 img라는 element를 생성하고 src라는 property를 추가해준다.

이후 appendChild()를 통하여 body에 생성된 htmm element를 넣어줄 수 있다.

document.body.appendChild(bgimage);

이를 통해 body 의 background가 랜덤으로 바뀔 수 있다.