“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
자바스크립트 - 마무리문제
10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다.
<!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>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-image: url(img/Frame\ 79.jpg);
}
#result {
width: 100%;
height: 100vh;
display:inline-block;
align-items: center;
font-size: 25px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div id="result">
<div class="quote"></div>
<div class="author"></div>
</div>
</body>
<script>
//선택자
const Result = document.querySelector("#result")
const Quote = Result.querySelector(".quote")
const Author = Result.querySelector(".author")
const dataresult = (value) => {
fetch("./dummy01.json")
.then(response => response.json())
.then(items => {
const rendomIndex = Math.floor(Math.random() * items.length);
Quote.textContent = items[rendomIndex].quote;
Author.textContent = items[rendomIndex].author;
})
.catch((err) => console.log(err));
};
dataresult();
setInterval(dataresult, 10000);
</script>
</html>마무리문제
- 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다.
- html파일에 선택자 Result,Quote,Author을 querySelector로 선택자를 만들어 주었습니다.
- fetch를 사용해서 js파일을 불러온 후 items라고 지정 후 json데이터를 파싱했습니다.
- Math()메서드를 사용해서 json데이터에 무작위 인용구를 선택하였습니다.
- 마지막으로 선택된 인용구와 저자를 textContent로 업데이트 하고
- dataresult()를 호출해서 페이지가 로드될 때 무작위 인용구를 선택하도록 하였고
- setInterval(dataresult, 10000)를 사용해서 10초마다 새 인용구를 업데이트 하도록 설정하였습니다.
- CSS는 style태그를 사용해서 필요한 속성들으 부여해 주었습니다.
<완성본>