[JS Project 100] 3. Random Quotes

BbickBbick_Develop·2022년 6월 29일

Description

This Random Quotes project is fairly simple. It calls for you to access the properties on an object that's embedded inside of an Array. When the “Generate Quote” button is pressed, it triggers a change in quote and the author who said it.

New things learned or refreshed:

This project was fairly simple. However, John wrote out his solution using an immediately invoked function expression (IIFE). So, I changed my solution to do the same. It feels good learning how and why IIFEs can be useful. He makes sure to continually explain their purpose, which is to wrap our functions in IIFEs so we won't contaminate the global variable space.

Time to code:

This took about 5 minutes to code.

Biggest take away:

None really. It's good to see IIFEs being used on small problems so when I see them on larger problems, or in libraries like jQuery, I have a good guess as to why they exist.

Your Turn!

What to accomplish:

Download the source code from the github repository above.
Delete the contents of the app.js file (except for the quotes and author content of the array).
Implement the JavaScript code in your own app.js file.
Add a link to your finished project below!

What you should see:

When you click on the “Generate” button, you should see a new random quote and the corresponding author.

구현 코드

<body>

  <div class="conainer">
    <div class="row max-height align-items-center">
      <div class="col-11 mx-auto col-md-6 quote-container p-5">
        <button class="btn-ou tline-primary text-capitalize my-4 d-block mx-auto" id="generate-btn">랜덤 시구 생성</button>

        <h3 class="text-muted"><span class="quote-icon mr-3"><i class="fas fa-quote-left fa-3x"></i></span><span id="quote">가야 할 때가 언제인가를 분명히 알고 가는 이의 뒷모습은 얼마나 아름다운가.
          </span></i></span></h3>
        <h5 class="text-right text-capitalize author">-<span class="quote-author ml-3 ">이형기</span></h5>
      </div>


    </div>
  </div>

<script>

  // 시구 List를 추가.
  const quotes = [
    {
      quote:
        "벗이여, 부디 여기 덮인 흙을 파헤치지 마시오. 이 돌을 건드리지 않는 사람에게는 축복, 그리고 이 뼈를 옮기는 자에게는 저주가 있을진저.",
      author: "윌리엄 셰익스피어"
    },
    {
      quote:
        "자세히 보아야 예쁘다. 오래 보아야 사랑스럽다. 너도 그렇다.",
      author: "나태주"
    },
    {
      quote:
        "해 질 녘 울음이 타는 가을 강을 보것네.",
      author: "박재삼"
    }
  ];

  // 버튼을 가져옴
  const btn = document.getElementById("generate-btn");

  // addEventListener를 추가하기 전 function을 생성함.
  function Generate() {
    let random = Math.floor(Math.random() * quotes.length);
    console.log(random);

    document.getElementById("quote").textContent = quotes[random].quote;
    document.querySelector(".author").textContent = quotes[random].author;
  }
  
  // addEventListener를 추가.
  btn.addEventListener("click", Generate);
  
</script>

</body>