What are we building ?

Let’s build a web app that serves as a daily self-motivator and tool to brighten up your mood.  got it ? An app that shows you a random inspiration quote from Kanye quotes API !

Wanna have an idea about Kanye API (application programming interface ) first ?

https://kanye.rest is A free REST API for random Kanye West quotes type https://api.kanye.rest on your browser and see what you get !

Every time you refresh your navigator you’ll get a new quote

So let’s start building our app

First start with opening your favorite text editor and create two files : index .html the file where the format of the page goes and index.js where all the JS code goes .

open the index.html file and type the following

this line <script defer src=”src/index.js” charset=”utf-8″></script> is the one that calls the JavaScript code and the world ‘defer’ means that we’re going to wait for the content to load before running the JavaScript

The <div> is where the quote is going to show

Now let’s create the index.js file under yourproject/src

The first step we should is find the div where the quote will be placed and declare it as a variable. We can do this by typing:

let quotesDiv = document.getElementById('quotes')

In order to retrieve data from the Kanye API, we need to use the fetch function. For this first part, we are sending a GET request to the Kanye API.

The fetch returns an object as the response from the request. We call the .json () method on the response to parse the response text as JSON.

 Next, we do another .then(). Here we receive the JSON object that we can finally use to manipulate the DOM ! We can call this new JSON object quote. The final version of your file should look like this

Let’s have a look what our web page looks like !

Tips : during this tutorial I used VSCode editor and Xamp Server