JS Assignment Quiz background image

설명:

quiz 1 번의 배경화면을 사진을 넣어서 10초마다 명언과 함께 바뀌도록 설정했습니다.

 

body 의 구조는 동일하기 때문에 따로 설명하지 않겠습니다.

style 과 script 를 나눠서 설명하겠습니다.

style

@font-face {
    font-family: 'UhBeemysen';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeemysen.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #b185de;
}
body > div {
    color: rgb(170, 241, 214);
    font-family: UhBeemysen;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-top: 300px;
}

다른 부분은 모두 동일한데 배경 이미지를 조정해주기 위해서, 이미지의 반복을 피하는 background-repeat: no-repeat; 과 전체 화면을 이미지로 덮기 위해서 background-size: cover; 를 설정했습니다.

script

function getRandomQuote() {
    fetch("https://dummyjson.com/quotes")
        .then(response => response.json())
        .then(quotes => {
            const randomIndex = (Math.floor(Math.random() * quotes.quotes.length)+1);
            const quoteElement = document.createElement("p");
            const authorElement = document.createElement("p");

            quoteElement.textContent = quotes.quotes[randomIndex].quote;
            authorElement.textContent = quotes.quotes[randomIndex].author;

            document.querySelector("#quote").innerHTML = "";
            document.querySelector("#author").innerHTML = "";
            document.querySelector("#quote").appendChild(quoteElement);
            document.querySelector("#author").appendChild(authorElement);
    });
}

function getRandomImage() {
    fetch("https://api.unsplash.com/photos/random?client_id=7hm5UE-zn4cZhvCO0HHGurWd8gbC1zH81Fy0xz86jPQ")
        .then(response => response.json())
        .then(data => {
            document.querySelector("body").style.backgroundImage = `url(${data.urls.regular})`;
    });
}
getRandomImage()
getRandomQuote()
setInterval(getRandomImage, 10000);
setInterval(getRandomQuote, 10000);

명언이 출력되는 부분은 동일합니다.

 

이미지를 unsplash 에서 랜덤으로 가져오도록 설정했습니다.

getRandomImage 라는 함수 식을 만들어서 fetch 로 url 을 입력하고 가져왔습니다.

fetch()는 JavaScript에서 제공하는 함수 중 하나로, 네트워크를 통해 리소스를 가져오는 데 사용됩니다. 이 함수는 HTTP 요청을 보내고 응답을 받아와서 Response 객체로 반환합니다.

fetch() 함수는 Promise 객체를 반환하며, 비동기적으로 작동합니다. 따라서 then() 및 catch() 메서드를 사용하여 요청이 성공적으로 처리되었는지 또는 오류가 발생했는지 확인할 수 있습니다.

예를 들어, 다음은 fetch() 함수를 사용하여 서버에서 JSON 데이터를 가져오는 예제입니다.

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));​

이 예제에서는 fetch() 함수를 사용하여 data.json 파일을 가져오고, response.json() 메서드를 사용하여 JSON 데이터를 추출합니다. 

마지막으로 then() 메서드를 사용하여 데이터를 로그에 출력하고, catch() 메서드를 사용하여 오류를 처리합니다.

 

명언을 10초마다 랜덤으로 가져오도록 하는 설정과 같은 방법이기 때문에 같은 식이 쓰였다는 것을 보면 알 수 있습니다.