명언에 배경까지 바꿔주기

명언에 배경까지 바꿔주기

코드

let quonte = document.querySelector(".wise__quote");
let author = document.querySelector(".wise__author");
let wiseAll = []; 
let item = [];

const getRandomBackground = () => {
  const randomIndex = Math.floor(Math.random() * 10);
  return `url('https://source.unsplash.com/random/?${randomIndex}')`;
}

      

const dataQuestion = () => {
  fetch("../json/dummy01.json")  
    .then(res => res.json())       
    .then(items => {                

      let totIndex = Math.round(Math.random() * items.quotes.length);
      quonte.innerHTML = ` ${items.quotes[totIndex].id}. ${items.quotes[totIndex].quote} `;
      author.innerHTML = `- ${items.quotes[totIndex].author}`;


      items.quotes.forEach(element => {


        item.push({
          id: element.id,
          quote: element.quote,
          author: element.author
          
        });
      });
    })
    .catch((err) => console.log(err));
}

dataQuestion();

setInterval(() => {
  dataQuestion();

  let totIndex = Math.round(Math.random() * item.length);
  quonte.innerHTML = `${item[totIndex].id}. ${item[totIndex].quote} `;
  author.innerHTML = `- ${item[totIndex].author}`;
  document.querySelector("body").style.transition = "background-image 0.1s";
  document.querySelector("body").style.backgroundImage = getRandomBackground();

  }, 1000);

변수 getRandomBackground 만들어 줍니다. getRandomBackground 안에 변수 randomIndex 을 만들어주고Math.floor(Math.random() * 10 )으로 이미지 10개를 랜덤값으로 불러와줍니다.

return으로 `url(' https://source.unsplash.com/random/?$ {randomIndex}')`로 불러와줍니다.

setInterval(() => {
  dataQuestion();

  let totIndex = Math.round(Math.random() * item.length);
  quonte.innerHTML = `${item[totIndex].id}. ${item[totIndex].quote} `;
  author.innerHTML = `- ${item[totIndex].author}`;
  document.querySelector("body").style.transition = "background-image 0.1s";
  document.querySelector("body").style.backgroundImage = getRandomBackground();

  }, 1000);

setInterval() 안에 

  document.querySelector("body").style.transition = "background-image 0.1s";
  document.querySelector("body").style.backgroundImage = getRandomBackground();

 

이미지에 style를 줍니다.