문제
명언 데이터를 가져와 그 중에서 1개의 명언만 가져와서 문서의 #result 영역에 명언 내용과 말한 사람을 표시해보세요.
이 때 명언 내용은 #result 영역에 있는 .quote 영역에, 말한 사람은 .author 영역에 표시하세요.
10초마다 명언과 말한사람이 바뀌게 작업하세요.
HTML
<!DOCTYPE html>
<html lang="ko">
<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>명언 모음</title>
</head>
<body>
<div id="main">
<div class="quote"></div>
<div class="author"></div>
</div>
</body>
</html>CSS
<style>
@import url('https://webfontworld.github.io/Montserrat/Montserrat.css');
* {
margin: 0 auto;
padding: 0;
}
body {
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height: 100vh;
background-color:#d398d9;
text-align: center;
font-size: 20px;
font-family: "Montserrat";
color: #7c2184;
}
.author {
padding-top: 30px;
text-decoration: underline;
text-underline-offset: 10px;
}
</style>SCRIPT
<script>
const quotesURL = "http://dummyjson.com/quotes";
function randomQuote(){
fetch(quotesURL)
.then(response => response.json())
.then(data => {
let randomNumber = Math.floor(Math.random() * data.quotes.length);
let divQuote = document.querySelector(".quote");
let divAuthor = document.querySelector(".author");
divQuote.innerHTML = data.quotes[randomNumber].quote;
divAuthor.innerHTML = data.quotes[randomNumber].author;
})
}
randomQuote();
setInterval(randomQuote, 10000);
</script>
JSON 형식으로 된 명언 데이터가 들어있는 사이트의 주소를 quoteURL 변수에 저장합니다.
함수 randomQuote에 fetch(quoteURL)를 사용하여 명언데이터를 가져옵니다.
.then(response => response.json())
fetch 성공 했을 때 실행되는 것으로 가져온 데이터를 변수 response에 저장 후 데이터 형태를 json으로 바꿔줍니다.
.then(data => {
let randomNumber = Math.floor(Math.random() * data.quotes.length);
let divQuote = document.querySelector(".quote");
let divAuthor = document.querySelector(".author");
divQuote.innerHTML = data.quotes[randomNumber].quote;
divAuthor.innerHTML = data.quotes[randomNumber].author;
})json 형태로 변경된 데이터를 변수 data에 담은 후 0~데이터의 길이 사이의 숫자를 랜덤으로 randomNumber에 저장해줍니다.
Math.random() 은 JavaScript에서 제공하는 내장 함수 중 하나로, 0 이상 1 미만의 부동소수점 숫자를 반환합니다.
반환되는 숫자는 균등하게 분포되어 있으므로, 이를 활용하여 무작위로 값을 생성하는 데 사용할 수 있습니다.
Math.floor()는 주어진 숫자를 소수점 이하를 버리고 내림한 정수를 반환하는 JavaScript 내장 함수입니다.
무작위로 생성한 실수 값을 정수 값으로 변환하거나, 길이가 가변적인 배열의 인덱스를 계산하는 데 활용될 수 있습니다.
setInterval 함수는 JavaScript에서 제공되는 내장 함수 중 하나로, 일정한 시간 간격으로 특정한 함수를 반복적으로 실행할 수 있도록 합니다.