19.
Everyone has been made for some particular work, and the desire for that work has been put in every heart.
Rumi
728x90
반응형
문제입니다.
명언 데이터를 가져옵니다. 그중에서 1개의 명언만 가져와서 문서의 #result 영역안에 있는 quote에 명원 내용을
author 안에는 말한 사람을 넣으세요 그리구 10마다 바뀌게 출력하세요.
길라잡이
무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면에 영역에 표시힙니다.
완성화면 입니다.
HTML 코드입니다.
<body>
<div id="result">
<div class="num"></div>
<div class="quote"></div>
<div class="author"></div>
</div>
</body>- HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다.
JS 코드입니다.
const num = document.querySelector(".num");
const quote = document.querySelector(".quote");
const author = document.querySelector(".author");
const result = document.querySelector("#result");
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)
//출력
result.style.transition = "3s";
result.style.background = `center / contain no-repeat url(https:source.unsplash.com/random/?coding=${Math.random()})`;
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파일에 quotes가 있고 그안에 데이터가 들어가 있습니다.
- 그래서 quotes를 변수에 담고 그걸 이제 map을 이용해서 반복문을 돌려서 변수 jsonAll 안에 배열에 담을 것입니다.
- map안에 변수를 생성해서 그안에 json의 값을 입력해주었습니다.
- 그리고 그걸 return문으로 밖으로 출력시켰습니다. 리턴으로 출력이 안되면 map문 안에서만 동작되고 밖에서는 안보여지게 됩니다.
- 그후 새로고침할때 계속 바뀌게 할꺼니 random 메서드를 써서 변수에 담았습니다.
- 그리고 div박스를 선언 한다음 그안에 innerHTML을 통해 값을 넣어주었습니다.
- 그리고 10초마다 변경을 해야하니 setinervel를 이용하기 위해서 함수로 묶어 주었습니다.
- 그후 1번은 출력해야기 떄문에 출력문 하나 써주고 그다음 setinerval 안에 넣어서 출력 했습니다.
- result를 선언해 줬고 그리고 result 안에 background 값을 .style 로 해서 넣어주었습니다. 그 안에 url를 넣어 주었고 파라미터로 넘겨주기때문에 Random 함수를 써서 작성했습니다.
728x90