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 ?
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
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