QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
10초에 한번씩 명언이 바뀌는 페이지 만들기
마무리 문제1
JSON 데이터를 가져온 후 코솔창에 결과를 표시해보세요. 가져온 데이터가 어떤 구조로 이루어져 있는지 살펴보는 것이 목표입니다
길라잡이
- fetch와 then, catch를 사용해서 URL에서 자료를 가져옵니다.
- 가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그중에서 명언과 말한 사람 정보를 가져오는 방법을 생각합니다.
마무리 문제2
마무리 문제1에서 명언 데이터를 가져오는데 성공했으면 그중에서 1개의 명언만 가져와서 문서의 #result 역영에 명언 내용과 말한 사람을 표시해 보세요. 이때 명언 내용은 #result 영역에 있는 .quote 영역에, 말한 사람은 .author 영역에 표시하세요.
길라잡이
- 마무리 문제1에서 한 번에 몇 개의 명언을 가져오는지 확인했으면 1과 그 숫자 사이의 값을 무작위로 추출합니다.
- 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사라 이름을 나눠서 화면 영역에 표시합니다.
코드
<!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>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/c.css">
<style>
body {
background-image: url(img/3.jpg);
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center;
background-size: cover;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 30px;
color: black;
}
</style>
</head>
<body class="bg01 font11">
<div id="result">
<div class="quote"></div>
<div class="author"></div>
</div>
<script>
//함수 정의
function updateQuote() {
fetch("json/dummy01.json")
.then(res => res.json())
.then(data => {
const result = document.querySelector("#result");
const random = Math.floor(Math.random() * 30);
result.querySelector(".quote").innerHTML = data.quotes[random].quote;
result.querySelector(".author").innerHTML = ` - ${data.quotes[random].author}`;
})
.catch(error => console.log(error));
}
// 10초마다 함수 실행
updateQuote();
setInterval(updateQuote, 10000);
</script>
</body>
</html>
updateQuote 함수를 정의하여, 이 함수 내부에서 fetch API를 사용하여 명언 데이터를 가져옵니다. 그리고 가져온 데이터에서 랜덤으로 명언 하나를 선택하여 HTML의 #result 요소에 출력합니다.
그 다음, updateQuote 함수를 호출하여 명언을 불러오고, setInterval 함수를 사용하여 10초마다 updateQuote 함수를 실행시키도록 설정합니다. 이렇게 하면 매 10초마다 새로운 명언이 자동으로 업데이트되어 출력됩니다.
반응형
