문제입니다.
견적 데이터를 가져옵니다.
그 중에서 인용문 하나만 가져와 문서의 #result 영역에 있는 인용문 안에 인용문을 넣는다.
그것을 말한 사람을 저자에 넣고 10마다 인쇄하십시오.
가이드
임의의 숫자를 사용하여 인용문을 가져온 다음 인용 부분과 화자의 이름이 화면의 영역으로 나뉩니다.
펜 보기 숙제 ture403에 의해(@ture403) 에 코드펜.
완성된 화면입니다.
이것은 HTML 코드입니다.
<body>
<div id="result">
<div class="num"></div>
<div class="quote"></div>
<div class="author"></div>
</div>
</body>- HTML은 결과로 래핑된 3개의 div 상자입니다.
이것은 JS 코드입니다.
const num = document.querySelector(".num");
const quote = document.querySelector(".quote");
const author = document.querySelector(".author");
let jsonAll =();
//JSON 파일 불러오기 fetch문
function delay() {
fetch('https://dummyjson.com/quotes')
.then(response => response.json())
.then(json => {
//변수 설정
let quotes = json.quotes
//배열에 map을 써서 반복을 돌려서 값을 넣기
jsonAll = quotes.map((el,index)=>{
// console.log(el);
//리턴을 위해서 변수로 저장함
const quoteId = {
author :el.author,
quoteId : el.id,
queotes : el.quote
}
// console.log(queoteMain);
//return으로 밖으로 꺼냄
return quoteId
})
// console.log(jsonAll)
//변수 안에 랜덤하게 숫자를 저장
let ran = Math.floor(Math.random()*jsonAll.length);
// console.log(ran)
//출력
num.innerHTML = jsonAll(ran).quoteId + ".";
quote.innerHTML = jsonAll(ran).queotes;
author.innerHTML = jsonAll(ran).author;
})
.catch((err) => console.log(err));
}
delay();
setInterval(delay, 10000);- 먼저 json 파일을 불러와야 해서 fetch 문을 작성했습니다.
- 가져온 json 파일 변수에 따옴표가 있고 그 안에 데이터가 포함되어 있습니다.
- 따라서 따옴표를 변수에 넣고 이제 map을 사용하여 반복하고 jsonAll 변수의 배열에 넣습니다.
- 맵에 변수를 생성하고 json 값을 입력했습니다.
- 그리고 return 문으로 출력합니다.
리턴으로 출력이 없으면 map 문 안에서만 동작하고 밖에서는 보이지 않습니다. - 그 이후로는 새로고침할 때 계속 변경을 하게 되므로 랜덤 방식을 이용하여 변수에 넣었습니다.
- 그리고 div box를 선언한 후 innerHTML을 통해 값을 넣었습니다.
- 그리고 10초마다 바꿔야 하기 때문에 setinervel을 사용하는 함수로 묶었습니다.
- 그 후 1번을 출력해야 하기에 출력문을 작성한 후 setinerval에 넣고 출력했습니다.