Display Random Advice On Your Website or Web App Using Advice Slip JSON API

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

Related Post(s)

» YTS YIFY MOVIES API - PROJECT PREVIEW

» How to convert the News API Date format to DD MM YY

» All Countries Drop Down List | HTML Select Country Name

» How to display News with out searching - NEWS API(Source Code)

» Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Category :: API
Published :: 7 months ago At: 07:57 PM
Detailed Date :: May 29^th, 2021
Writer :: Code

RECENT POSTS

6 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.

7 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.

7 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.

7 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.

7 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

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.

9 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?

11 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).

1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.

Subscribe