- Advice Slip API
: 세계적인 명언이나 조언들을 보여주는 API로 간단하게 웹앱을 만들어봤다. 앞전에 만든 Numbers API 사용한 것과 같은 맥락이라 크게 어려운 것 없고, 다시 한번 간단하게 공부하기 좋았다.
Advice Slip JSON API
In the event of an error occuring, a message object is returned, containing relevant information about the request. A slip object is a simple piece of advice. A search object contains the results of a slip search query. A messages object contains informati
api.adviceslip.com
<코드>
- index.html
<body class="bg-secondary">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card p-4 mt-5">
<h1>Advice Slip</h1>
<span>버튼을 클릭하면 랜덤 advice가 나타납니다.</span>
<button
class="btn btn-primary mt-3"
style="outline: none; border: none;"
>
Click
</button>
<div class="card-body">
<div class="mt-2" id="advice-area">
<h3 class="card-title">Random advice</h3>
<p class="text card-text"></p> <!--명언이 나타나는 부분-->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
- main.js
const adviceText = document.querySelector('.text');
const btn = document.querySelector('.btn');
const adviceArea = document.getElementById('advice-area');
btn.addEventListener('click', advice);
function advice() {
fetch("https://api.adviceslip.com/advice")
.then(response => response.json())
.then(data => {
adviceArea.style.display = 'block';
adviceText.innerHTML = data.slip.advice;
})
.catch(err => console.log(err));
}
<결과>
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] Jest를 사용한 테스트 코드 짜기! (0) | 2021.07.04 |
|---|---|
| [JavaScript] 객체, 배열 자료 다루기 - JSON 데이터 (0) | 2020.09.24 |
| [JavaScript] Numbers API를 이용한 프로젝트 - AJAX, Fetch (0) | 2020.08.10 |
| [JavaScript] AJAX 란 무엇인가? (0) | 2020.07.17 |
| [JavaScript] Event - addEventListener, 이벤트 객체 (0) | 2020.05.14 |