Q1
JSON 형식으로 저장된 데이터를 불러와 구조를 살펴보고 #result 영역에 명언 내용과 말한사람 표시하세요.
이때 명언 내용은 #result 영역에 있는 .quote영역에, 말한 사람은 .author영역에 표시하세요.
10초에 한 번씩 명언이 바뀌게 하세요.
HTML
<!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">
</head>
<body class="bgc bgimg">
<div id="result">
<div class="quote"></div>
<div class="author"></div>
</div>
</body>
</html>문제에 따라서 result 영역 안에 명언이 들어갈 quote 영역, 작가가 들어갈 author 영역을 만들어주었습니다.
CSS
@import url('https://webfontworld.github.io/gonggames/EsaManru.css');
@import url('https://webfontworld.github.io/sebang/SebangGothic.css');
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
body.bgimg {
background-image: url(../assets/img/sky-1-min.jpg);
}
body::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(166, 217, 240, 0.8);
z-index: -1;
}
body.bgc::after {
background: rgba(166, 217, 240, 0.8);
}
#result {
color: #fafdff;
padding: 20px;
}
.quote {
font-family: "EsaManru";
font-size: 2.3rem;
margin-bottom: 20px;
text-align: center;
}
.author {
font-size: 1.5rem;
margin-left: 1rem;
font-style: italic;
font-family: "SebangGothic";
text-align: center;
}import 방식으로 폰트를 불러오고 저는 이미지를 넣어주고 싶어서 이미지를 설정하고 이미지가 배경색 뒤로 보이게 하기 위해 배경색도 추가해주었습니다.
script
<script>
const updateQuote = (value) => {
fetch(`http://dummyjson.com/quotes`)
.then(response => response.json())
.then(data => {
const result = document.querySelector("#result");
const random = Math.floor(Math.random() * 30); // 0 ~ 29 사이의 수
result.querySelector(".quote").innerHTML = data.quotes[random].quote;
result.querySelector(".author").innerHTML = ` - ${data.quotes[random].author}`;
})
.catch(error => console.log(error));
}
updateQuote();
setInterval(updateQuote, 10000); //10초 설정하기
</script>Quote()함수를 호출하고 fetch() 메서드를 사용하여 http://dummyjson.com/quotes에서 명언(quote)과 저자(author)를 포함한 JSON 데이터를 가져옵니다.
response.json()을 호출하여 가져온 데이터를 JSON 형식으로 변환하고, 결과를 data 변수에 저장합니다.
document.querySelector() 메서드를 사용하여 HTML 문서의 #result 요소를 찾습니다.
Math.floor() 함수를 사용하여 0에서 29 사이의 난수(random)를 생성합니다.
data.quotes[random]을 사용하여 데이터에서 랜덤으로 난수에 해당하는 명언과 저자를 선택합니다.
선택한 명언과 저자는 result 요소의 .quote와 .author 클래스에 각각 삽입됩니다.
catch() 메서드를 사용하여 오류가 발생한 경우 콘솔에 오류 메시지를 출력합니다.
setInterval() 메서드를 사용하여 10초마다 Quote() 함수를 반복 실행합니다.
10000는 10초입니다.
이렇게 하면 10초마다 명언이 랜덤으로 바뀌게 됩니다.