Understanding fetch() 2 - Building A Random Quote Generator App

In my previous article, I'd explained the concepts of fetch API, how it differs from xmlhttprequest plus some important stuffs you need to know. And i had promised to write an article that deals with the practical use of the fetch API.

In this tutorial, we'll learn how to build an app that display random quotes to the user every 10 seconds, we will be using the data available at https://api.quotable.io/random . This means we won't be the one responsible for typing the random quotes that will appear on our app. The website does that for us already, and it's publicly available for everyone to make use of.

Here is a link to the final output of what we will be building, and also the full source code is publicly available on GitHub.

Let's get started

The first thing we need to do is to create 3 different files index.html style.css and app.js 📑
Copy and paste the code below inside the index.html file

<html>
    <head>
        <title> My Awesome Quote App</title>
        <link rel="stylesheet" href="style.css">
    </head> 
    <body>
        <div class="container">
            <div id="quote">
                Don't forget: life is a race, if you don't run fast, you'll get trampled
            </div>
            <div id="author">
               - Anonymous 🎭
            </div>
        </div>
    </body>
  <script src="app.js" ></script>
<html />

We had just created an html page with some dummy quote inside a <div> since we'll be getting our quote from another server and this will require internet access.

Also, copy and paste the code below inside the style.css file. If you're not so sure of what HTML and CSS is, here is a great resource for that.

/* style.css */
body { 
 background: linear-gradient(to right, #ff7300, #ff4800); 
 color: #fff;
}
.quote-body { 
 margin: auto; 
 width: 400px; 
 height: 200px; 
 margin-top: 150px;
}
#quote { 
 font-size: 40px; 
 font-weight: bold;
}
.author {
 font-weight: normal;
 font-size: 20px
}

And finally, for where the magic will happen 🧙. Copy and paste the code below inside app.js file.

//app.js
const url = "https://api.quotable.io/random";
function generateQuote(){
   fetch(url)
  .then(function(data) {
         return data.json();
    })
    .then(function(data){    
    document.getElementById("quote").innerHTML = data.content; document.querySelector(".author").innerHTML = "- " + data.author;
   })
 .catch(function(err) {
    console.log(err); 
    });
 }
 // Repeat generateQuote() every 10 seconds
setInterval(generateQuote() ,10000);
//Note - 10000 milliseconds = 10

Code Explanation 👩‍💻

generateQuote: Inside the generateQuote() function, we had written the code to get a random quote from https://api.quotable.io/random using fetch and we've also changed the innerHTML (content) of our dummy quote and dummy author to the fresh one we got from https://api.quotable.io/random.
setInterval: setInterval is a function used for repeating an action every n milliseconds and it takes two parameters, the first one is the action you want to repeat while the second one is the time you want to wait before it repeats the same action again. And above, we wrote the code to repeat our action of generating a random quote every 10 seconds (10000 milliseconds = 10seconds).

Conclusion:

In this tutorial, we had learned how to create a random quote generator app with HTML, CSS and JavaScript. If you've successfully re-built this app with little or no modifications, I'll be glad if you can share it on Twitter tagging me (@asaolu_elijah).

📌 Also if you are facing any issue with building this or have any question, you can drop a comment below or reach out to me on Twitter 📩.
Finally, don't forget to star ⭐ this project on GitHub

Thanks for reading, you're awesome! 🤗

Blog

Understanding fetch() 2 - Building A Random Quote Generator App

Asaolu Elijah 🧙‍♂️

Let's get started

Code Explanation 👩‍💻

Conclusion:

Join Our Newsletter. No Spam, Only the good stuff.

Related