Best matchRelated: API requestsIntermediate
Amine Pics Generator
Request live data and turn the response into useful page content.
Build an amine pics generator →Dad Jokes Generator
Build a dad jokes 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
Dad Jokes Generator
Build a dad jokes generator using HTML, CSS, and JavaScript, then connect the interface to the logic that makes it work. You’ll learn how to generate a fresh result and update the interface instantly while getting hands-on practice with API requests, async and await, and click events.
02 — Included
- Live API-powered results
- Dad Jokes 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
dad-jokes-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>Dad Jokes Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="heading">Dad Joke Generator</h1>
<p class="joke" id="joke">Dad Joke</p>
<button class="btn" id="btn">Tell me a joke</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
Random Emoji
Request and render a randomly selected emoji.
Build a random emoji →
Related: JavaScript calculations
Random Quote Generator
Turn JavaScript calculations into clear visual results.
Build a random quote generator →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
Random Emoji
Request and render a randomly selected emoji.
Build a random emojiRelated: JavaScript calculations
Random Quote Generator
Turn JavaScript calculations into clear visual results.
Build a random quote generator