Best matchRelated: API requestsIntermediate
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo gallery →Random Emoji
Build a random emoji 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 Emoji
In this project, we’re going to build a random emoji using HTML, CSS, and JavaScript. You’ll see how to connect user interactions to visible changes on the page. 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 Emoji 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
- Generate random values
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, Functions and Math.random.
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-emoji/
<!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">
<link rel="stylesheet" href="style.css">
<title>Random Emoji</title>
</head>
<body>
<h2>Random Emoji</h2>
<div class="section">
<button class="btn" id="btn">Click</button>
<p class="emoji-name" id="emoji-name">Emoji Name</p>
</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
Amine Pics Generator
Handle asynchronous results and update the interface when they arrive.
Build an amine pics generator →
Related: JavaScript calculations
Dad Jokes Generator
Turn JavaScript calculations into clear visual results.
Build a dad jokes generator →Related: API requestsBest match
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo galleryRelated: async/await
Amine Pics Generator
Handle asynchronous results and update the interface when they arrive.
Build an amine pics generatorRelated: JavaScript calculations
Dad Jokes Generator
Turn JavaScript calculations into clear visual results.
Build a dad jokes generator