Display Random Advice On Your Website or Web App Using Advice Slip JSON API
Make money for being or staying online/internet.
You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!
Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.
The Advice Slip API is a public API. For more information, check out their API Documentation.
Tutorial
Source Code
This is the markup code inside the index.html file.
copy
<div class="container"> <div id="results"></div> <button class="btn" id="getData">Get Advice</button> </div>
This is the code inside the app.js file.
copy
const resDiv = document.querySelector('#results'); const resBtn = document.querySelector('#getData'); resBtn.addEventListener('click', () => { getAdvice(); }); window.onload = () => { getAdvice(); }; function getAdvice() { fetch(' https://api.adviceslip.com/advice').then(response => { return response.json(); }).then(adviceData => { const Adviceobj = adviceData.slip; resDiv.innerHTML = `<p>${Adviceobj.advice}</p>`; }).catch(error => { console.log(error); }); }
Or you can visit the Github repo and download it from there: REPO with all files.
If you liked this, please Subscribe to my channel for free lifetime tutorials.PEACE
Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW
Related Post(s)
» Open Weather API - Source Code
collections_bookmark Category :: APIdate_range Published :: 2 years ago At: 07:57 PM
event_note Detailed Date :: May 29th, 2021
person Writer :: Code