랜덤 명언 만들기

 

명언 준비

명언을 준비해주고 배열안에 객체 형태로 만들어준다.

const quotes = [
  {
    quote: "삶이 있는 한 희망은 있다",
    author: "키케로",
  },
  {
    quote: "산다는것 그것은 치열한 전투이다.",
    author: "로망로랑",
  },
  {
    quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.",
    author: "사무엘존슨",
  },
  {
    quote: "언제나 현재에 집중할수 있다면 행복할것이다.",
    author: "파울로 코엘료",
  },
  {
    quote:
      "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해",
    author: "찰리 채플린",
  },
  {
    quote: "직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다",
    author: "엘버트 허버드",
  },
  {
    quote: "신은 용기있는자를 결코 버리지 않는다",
    author: "켄러",
  },
  {
    quote:
      "행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가",
    author: "그로씽",
  },
  {
    quote: "우리를 향해 열린 문을 보지 못하게 된다",
    author: "헬렌켈러",
  },
  {
    quote: "피할수 없으면 즐겨라",
    author: "로버트 엘리엇",
  },
];

 

random() 사용하기

console.log(Math.random())을 찍어보면 랜덤한 숫자들이 나온다.

 

여기서 10을 곱하고 Math.floor로 감싸면 랜덤한 숫자 0~9가 나온다. 

console.log(Math.floor(Math.random() * 10));을 찍어보면 랜덤한 한자리 숫자가 나온다.

 

 

10을 곱하지 않고 배열의 개수만큼 곱하면 배열의 개수 -1 만큼의 값이 나온다. 

코딩에서는 0부터 숫자를 세기때문에 -1만큼 나오는게 오히려 좋다.

 

배열에서 랜덤으로 명언 뽑아내기

랜덤한 숫자가 나오게 했으니깐.

숫자를 토대로 랜덤한 명언을 뽑아내면 된다.

 

const quotes = [
  {
    quote: "삶이 있는 한 희망은 있다",
    author: "키케로",
  },....
 ]

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

quote.innerText = quotes[Math.floor(Math.random() * quotes.length)].quote;
author.innerText = quotes[Math.floor(Math.random() * quotes.length)].author;

quotes.length를 이용해서 배열의 개수를 곱하게 해준다.

그다음 명언을 뽑아내면 완성이다.

 

완성 코드

 

const quotes = [
  {
    quote: "삶이 있는 한 희망은 있다",
    author: "키케로",
  },
  {
    quote: "산다는것 그것은 치열한 전투이다.",
    author: "로망로랑",
  },
  {
    quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.",
    author: "사무엘존슨",
  },
  {
    quote: "언제나 현재에 집중할수 있다면 행복할것이다.",
    author: "파울로 코엘료",
  },
  {
    quote:
      "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해",
    author: "찰리 채플린",
  },
  {
    quote: "직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다",
    author: "엘버트 허버드",
  },
  {
    quote: "신은 용기있는자를 결코 버리지 않는다",
    author: "켄러",
  },
  {
    quote:
      "행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가",
    author: "그로씽",
  },
  {
    quote: "우리를 향해 열린 문을 보지 못하게 된다",
    author: "헬렌켈러",
  },
  {
    quote: "피할수 없으면 즐겨라",
    author: "로버트 엘리엇",
  },
];

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

quote.innerText = quotes[Math.floor(Math.random() * quotes.length)].quote;
author.innerText = quotes[Math.floor(Math.random() * quotes.length)].author;