CSS
<style>
#main {
width: 1200px;
height: 300px;
background-color: #ffffff;
color: #000000;
margin: 0 auto;
padding: 50px;
position: relative;
text-align: center;
border: 1px solid #fd34fd;
}
#main .quote {
padding: 20px;
text-decoration: underline;
color: #5100ff;
}
.button {
display: inline;
position: absolute;
width: 50px;
height: 30px;
background-color: rgb(58, 206, 73);
color: #fff;
text-align: center;
transform: translateY(-50%);
cursor: pointer;
}
</style>위 코드는 HTML과 CSS로 작성된 스타일 시트입니다.
#main은 너비가 1200px이고 높이가 300px이며, 배경색은 흰색, 글자 색상은 검은색, 가운데 정렬되어 있으며, 보더는 1px 두께의 보라색입니다. #main .quote는 밑줄이 그어진 파란색으로 글자를 강조합니다.
.button은 인라인 속성을 가지고 있으며, 너비는 50px, 높이는 30px, 배경색은 녹색, 글자 색상은 흰색입니다. 또한, 버튼은 수직으로 가운데 정렬되어 있으며, 클릭 가능한 상태로 설정되어 있습니다.
HTML
<body>
<div id="main">
<div class="button">stop</div>
<h1 class="result"></h1>
<h2 class="quote"></h2>
</div>
</body>위 코드는 HTML로 작성된 코드입니다.
body 태그 안에 #main 이라는 id를 가진 div가 있습니다. 그 안에는 "stop"이라는 글자가 쓰인 버튼과, class가 "result"와 "quote"인 h1과 h2 태그가 있습니다.
이 코드는 화면에 나타날 요소들을 구성하는데 사용됩니다.
JAVASCRIPT
<script>
let number = 0;
fetch("json/dummy01.json")
.then(name => name.json())
.then(result => {
let result1 = document.querySelector(".result")
let quote1 = document.querySelector(".quote")
let stop = document.querySelector(".button")
let Interval = setInterval(() => {
number = Math.floor(Math.random()*30 + 1)
result1.innerHTML = result.quotes[number].quote
quote1.innerHTML = "- " + result.quotes[number].author
}, 1000);
stop.addEventListener("click", () => {
if(Interval){
clearInterval(Interval)
Interval = null;
} else {
Interval = setInterval(() => {
number = Math.floor(Math.random()*30 + 1)
result1.innerHTML = result.quotes[number].quote
quote1.innerHTML = "- " + result.quotes[number].author
}, 1000);
}
})
})
</script>위 코드는 자바스크립트로 작성된 코드입니다. fetch 함수를 사용하여 json/dummy01.json 파일에서 데이터를 가져오고, 가져온 데이터를 then 함수를 사용하여 처리합니다.
그 후 setInterval 함수를 사용하여 1초마다 변수 number를 1부터 30까지 랜덤하게 생성합니다. 그리고 result.quotes[number].quote와 result.quotes[number].author 값을 각각 결과와 인용구로 나타내는 h1과 h2 태그를 변경합니다.
버튼에 이벤트 리스너가 추가되어 있으며, 클릭하면 setInterval 함수를 종료하거나 시작합니다. 이를 통해 인용구가 자동으로 변경되는 것을 멈추거나 다시 시작할 수 있습니다.
댓글