마무리 문제(1) 추가 내용

오늘은 마무리 문제1를 풀어보겠습니다!

자바스크립트 마무리 문제

명언을 무작위로 가져와 화면에 10초마다 한 번씩 바뀌게 보여주는 프로그램을 만들어보겠습니다. 거기다 추가로 배경도 unsplah API를 사용해 랜덤으로 바뀌게 해주겠습니다.

 

구조

구조는 동일하게 짜주겠습니다.

<div id="result" class="container">
    <div class="quote"></div>
    <div class="author"></div>
</div>

스크립트

const getRandomBackground = () => {
    const keywords = ['programming', 'coding'];
    const randomIndex = Math.floor(Math.random() * keywords.length);
    const timestamp = new Date().getTime();
    return `url('https://source.unsplash.com/random/?${keywords[randomIndex]}&_=${timestamp}')`;
};

const updateQuote = () => {
    fetch("json/dummy01.json")
    .then(res => res.json())
    .then(data => {
        const result = document.querySelector("#result");
        const random = Math.floor(Math.random() * data.quotes.length);
        result.querySelector(".quote").innerHTML = data.quotes[random].quote;
        result.querySelector(".author").innerHTML = data.quotes[random].author;
        document.querySelector("body").style.backgroundImage = getRandomBackground();
    })
    .catch(error => console.log(error));
};

updateQuote();

const intervalTime = 5000;

setInterval(() => {
    updateQuote();
}, intervalTime);

getRandomBackground 함수 정의하기
keywords 배열에서 무작위로 하나의 단어를 선택합니다.
선택된 단어와 타임스탬프를 조합하여, Unsplash API로부터 해당 단어를 검색한 이미지 URL을 생성합니다.
updateQuote 함수 정의하기
dummy01.json 파일에서 JSON 데이터를 가져옵니다.
JSON 데이터에서 무작위로 하나의 명언(quote)과 작가(author)를 선택합니다.
선택된 명언과 작가를 HTML에 표시합니다.
getRandomBackground 함수를 호출하여, 무작위 배경 이미지를 body 요소의 배경으로 설정합니다.
updateQuote 함수를 처음 한번 실행합니다.
5초마다 updateQuote 함수를 반복적으로 실행합니다.

 

UNSPLASH API

Unsplash는 고해상도의 무료 이미지를 제공하는 웹사이트입니다. Unsplash API는 개발자들이 Unsplash의 이미지 및 관련 정보를 사용할 수 있도록 하는 인터페이스를 제공합니다.

API를 사용하면 Unsplash에서 제공하는 수백만 개의 고품질 이미지를 검색하고, 다운로드하고, 앱 또는 웹사이트에 통합할 수 있습니다. 라이선스 문제로 인해 저작권 걱정 없이 개발자들이 자유롭게 사용할 수 있는 이미지 라이브러리로써 매우 유용합니다.

Unsplash API를 사용하려면 무료로 개발자 계정을 만들고, 인증 키를 발급 받아야 합니다. 이를 통해 API를 호출할 때 인증을 거쳐야 하며, 인증된 사용자만이 API를 통해 이미지를 다운로드하고 사용할 수 있습니다.

 

완성된 페이지와 코드

 

 

코드보기