Understanding fetch() 2 - Building A Random Quote Generator App
Tags: javascript, tutorial, beginners, webdev
Published: 2020-04-05 16:28:19

In my [previous article](https://dev.to/asaoluelijah/understanding-the-fetch-api-in-javascript-1c70), 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](https://asaoluelijah.github.io/quote) is a link to the final output of what we will be building, and also the full source code is publicly available on [GitHub](https://github.com/AsaoluElijah/AsaoluElijah.github.io/tree/master/quote).

## 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
<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](https://w3schools.org) is a great resource for that.

```css
/* 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.

```javascript
//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](https://twitter.com/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](https://twitter.com/asaolu_elijah) 📩.
Finally, don't forget to star ⭐ this project on [GitHub](https://github.com/AsaoluElijah/AsaoluElijah.github.io/tree/master/quote)


Thanks for reading, you're awesome! 🤗