마무리 예제

카테고리 없음

마무리 예제

Hyeon been 2023. 4. 15. 16:36

728x90

1초마다 랜덤으로 바뀌는 명언

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Quotes</title>
  <link rel="stylesheet" href="css/quotes.css">
  <script defer src="../06/js/solution-1.js"></script>
</head>

<body>
  <div class="result__wrap">
    <div id="result">
      <h1>오늘의 명언</h1><br>
    </div>
    <h2 class="wise__quote"></h2><br><br>
    <span class="wise__author"></span>
  </div>
</body>

</html>

HTML 문서에서 .wise__quote와 .wise__author 클래스를 가진 요소를 각각 quonte와 author 변수에 할당합니다.빈 배열 wiseAll과 item을 선언합니다.

dataQuestion 함수를 정의합니다.

fetch를 사용하여 "../json/dummy01.json" 경로에서 데이터를 가져옵니다.

가져온 데이터를 JSON 형식으로 변환합니다.

변환된 데이터의 quotes 배열을 순회하며 각 요소의 id, quote, author를 item 배열에 객체 형태로 저장합니다.

dataQuestion 함수를 호출합니다.

1초마다 실행되는 setInterval 함수를 사용하여 다음을 수행합니다.

item 배열에서 무작위로 요소를 선택하여 quonte와 author 요소의 내용을 업데이트합니다.