Best matchAPI requestsIntermediate
Dad Jokes Generator
Request live data and turn the response into useful page content.
Build a dad jokes generator →Amine Pics Generator
Build an amine pics 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
Amine Pics Generator
In this project, we’re going to build an amine pics 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
- Amine Pics 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 three files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for live data.
Project structure
amine-pics-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>Anime Pics Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>Anime Pics Generator</h1>
<button class="btn" id="btn">Get Anime</button>
<div class="anime-container">
<img class="anime-img" src="https://c.files.bbci.co.uk/F382/production/_123883326_852a3a31-69d7-4849-81c7-8087bf630251.jpg">
<h3 class="anime-name">Anime Name</h3>
</div>
</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
async/awaitIntermediate
Random Emoji
Request and render a randomly selected emoji.
Build a random emoji →
JavaScript calculations
Random Quote Generator
Turn JavaScript calculations into clear visual results.
Build a random quote generator →Related: API requestsBest match
Dad Jokes Generator
Request live data and turn the response into useful page content.
Build a dad jokes 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