[JS] 랜덤으로 명언, 배경사진 불러오기

우선 랜덤으로 명언 불러오는 것을 알아보겠습니다.

1.  더미데이터를 만들어준다.
2.  html의 dom 요소를 불러와 변수를 선언한다.
3.  더미데이터의 길이만큼 랜덤으로 숫자를 뽑는다.
4.  dom 요소에 author와 quote를 각각 넣어준다.

const quotes = [
  {
    quote: "I never dreamed about success, I worked for it",
    author: "Estee Lauder",
  },
  {
    quote: "Do not try to be original, just try to be good.",
    author: "Paul Rand",
  },
  {
    quote: "Do not be afraid to give up the good to go for the great",
    author: "John D. Rockefeller",
  },
  {
    quote: "If you cannot fly then run. If you cannot run, then walk. And if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.",
    author: "Martin Luther King Jr.",
  },
  {
    quote: "Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.",
    author: "Thomas Edison",
  },
  {
    quote: "The fastest way to change yourself is to hang out with people who are already the way you want to be",
    author: "REid Hoffman",
  },
  {
    quote: "Money is like gasoline during a road trip. You do not want to run out of gas on your trip, but you are not doing a tour of gas stations",
    author: "Tim O Reilly",
  },
  {
    quote: "Some people dream of success, while other people get up every morning and make it happen",
    author: "Wayne Huizenga",
  },
  {
    quote: "The only thing worse than starting something and falling.. is not starting something",
    author: "SEth Godin",
  },
  {
    quote: "If you really want to do something, you will find a way. If you do not, you will find an excuse.",
    author: "Jim Rohn",
  },
];

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

const todaysQuote = quotes[parseInt(Math.random() * quotes.length)];

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

---

두번째로 랜덤 배경을 설정하는 법을 알아보겠습니다.
(dom 요소를 불러오지않고 js 파일에서 직접 body에 추가할내용을 만들겠습니다.)

1. 사진에 대한 더미데이터를 만든다.(단, img폴더에 있는 사진이름들과 일치시켜야함)
2. chosenImage란 더미 데이터의 길이만큼 랜덤으로 숫자를 넣어준다.
3. createElement를 사용하여 img 태그를 만들어준다.
4. src 속성값을 부여해준다.
5. img 태그를 넣어준다

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

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

const image = document.createElement("img");

image.src = `img/${chosenImage}`;

document.body.appendChild(image);

* appendChild() = body안에서 가장 뒤에 넣는 것

  prepend() = body안에서 가장 앞에 넣는 것