- Frederick Philips Brooks
Mythical Man-Month 저자
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 함수를 써서 작성했습니다.