Best matchRelated: API requestsIntermediate
Amine Pics Generator
Request live data and turn the response into useful page content.
Build an amine pics generator →Random Quote Generator
Build a random quote generator with HTML, CSS, and JavaScript while practicing API requests and async and await.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
API RequestsAsync and AwaitClick Events
01 — What you’ll build
Random Quote Generator
In this project, we’re going to build a random quote generator using HTML, CSS, and JavaScript. You’ll see how to generate a fresh result and update the interface instantly. Along the way, you’ll practice API requests, async and await, and click events, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Live API-powered results
- Random Quote Generator interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Fetch data from an API
- Work with asynchronous JavaScript
- Handle user clicks
- Select HTML elements from the DOM
- Update content on the page
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, JavaScript variables and number operations.
Complete project files
Build It from the Source Code
This project connects the interface to live API results.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for live data.
Project structure
random-quote-generator/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quote Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="heading">Random Quote Generator</h1>
<h2 class="quote">
<i class="fa-solid fa-quote-left"></i>
<span id="quote">Quote</span>
<i class="fa-solid fa-quote-right"></i>
</h2>
<p class="author" id="author">~ Author</p>
<button class="btn" id="btn">Get a quote</button>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice API requests, async/await, and javaScript calculations with these related projects.
Best match
Related: async/awaitIntermediate
Dad Jokes Generator
Handle asynchronous results and update the interface when they arrive.
Build a dad jokes generator →
Related: JavaScript calculations
Random Emoji
Request and render a randomly selected emoji.
Build a random emoji →Related: API requestsBest match
Amine Pics Generator
Request live data and turn the response into useful page content.
Build an amine pics generatorRelated: async/await
Dad Jokes Generator
Handle asynchronous results and update the interface when they arrive.
Build a dad jokes generatorRelated: JavaScript calculations
Random Emoji
Request and render a randomly selected emoji.
Build a random emoji