Top 10 Quotable API Solutions for Streamlining Your Workflow
Looking for a Postman alternative?
Try APIDog, the Most Customizable Postman Alternative, where you can connect to thousands of APIs right now!
Introduction to Building a Random Quote Generator App
The purpose of this tutorial is to guide you through the process of building a random quote generator app using the fetch API in JavaScript. This tutorial assumes that you have a basic understanding of HTML, CSS, and JavaScript.
Creating the Required Files
To start building the random quote generator app, we need to create three files: index.html, style.css, and app.js.
index.html
Below is the code for the index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div id="quote"></div>
<div id="author"></div>
</div>
</body>
</html>The index.html file sets up the basic structure of our web page. It includes a container div and two additional divs for displaying the quote and author.
style.css
The style.css file is used to add some basic styling to our web page. Here is an example of what the style.css file may look like:
.container {
text-align: center;
padding: 50px;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
#quote {
font-size: 24px;
margin-bottom: 20px;
}
#author {
font-size: 18px;
color: #555555;
}The style.css file sets the background color of the container div to a light gray and applies some basic typography.
app.js
The app.js file contains the JavaScript code that fetches a random quote from the API and updates the content of the quote and author divs. Here is an example of the app.js file:
const quoteElement = document.getElementById('quote');
const authorElement = document.getElementById('author');
async function generateQuote() {
const response = await fetch('https://api.quotable.io/random');
const data = await response.json();
quoteElement.innerHTML = data.content;
authorElement.innerHTML = `- ${data.author}`;
}
// Initial quote generation
generateQuote();The app.js file starts by declaring two variables, quoteElement and authorElement, which store the HTML elements where the quote and author will be displayed.
The generateQuote() function is responsible for making the API request and updating the HTML content. It uses the fetch() function to make an HTTP GET request to the quotable API and fetches the JSON data. The await keyword is used to wait for the response and data to be fetched before proceeding.
Once the data is fetched, the content and author properties are extracted from the JSON data. The innerHTML property of the quoteElement and authorElement variables is then updated with the new values.
Finally, the generateQuote() function is called to generate the initial quote when the web page is loaded.
Fetching a Random Quote from the API
To fetch a random quote from the API, we will use the generateQuote() function defined in the app.js file. This function is responsible for making the API request and updating the HTML content.
Inside the generateQuote() function, the fetch() function is used to make an HTTP GET request to the quotable API. The URL passed to the fetch() function specifies the API endpoint for fetching a random quote.
const response = await fetch('https://api.quotable.io/random');The await keyword is used to wait for the response to be fetched before proceeding. Once the response has been received, it is stored in the response variable.
To extract the JSON data from the response, we use the json() method.
const data = await response.json();The await keyword is used again to wait for the JSON data to be parsed before proceeding. The parsed JSON data is then stored in the data variable.
To display the quote and author on the web page, we update the innerHTML property of the quoteElement and authorElement variables with the corresponding values from the data variable.
quoteElement.innerHTML = data.content;
authorElement.innerHTML = `- ${data.author}`;The content and author properties are extracted from the JSON data using dot notation.
With this implementation, a random quote will be fetched from the API and displayed on the web page each time the generateQuote() function is called.
Displaying New Quotes Every 10 Seconds
To continuously display new quotes every 10 seconds, we can use the setInterval() function in JavaScript. This function repeatedly calls the generateQuote() function at a specified interval.
setInterval(generateQuote, 10000);In this case, we want to call the generateQuote() function every 10 seconds, so we set the interval to 10000 milliseconds (10 seconds).
By adding this line of code to the end of the app.js file, the generateQuote() function will be called every 10 seconds, updating the quote and author divs with new content.
// Continuous quote generation every 10 seconds
setInterval(generateQuote, 10000);This ensures that the random quote generator app displays new quotes at regular intervals without requiring any user interaction.
Conclusion
In this tutorial, we have learned how to build a random quote generator app using the fetch API in JavaScript. We started by creating the required files, including index.html, style.css, and app.js. We then fetched a random quote from the API using the generateQuote() function and updated the HTML content with the new quote and author.
To continuously display new quotes, we used the setInterval() function to call the generateQuote() function every 10 seconds. This ensured that the app kept updating the quote and author divs with fresh content.
If you want to see the final output of the app or access the full source code, you can check out the live demo and GitHub repository.
Looking for a Postman alternative?
Try APIDog, the Most Customizable Postman Alternative, where you can connect to thousands of APIs right now!
