Best matchRelated: API requestsIntermediate
Weather App
Request current weather data and display the response clearly.
Build a weather app →Photo Gallery
Build a photo gallery 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
Photo Gallery
Build a photo gallery using HTML, CSS, and JavaScript, then connect the interface to the logic that makes it work. You’ll learn how to organize images and create smooth, interactive navigation while getting hands-on practice with API requests, async and await, and click events.
02 — Included
- Live API-powered results
- Photo Gallery 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
- Read and update form values
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, JavaScript arrays and array methods.
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
photo-gallery/
<!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>Photo Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Photo Gallery</h1>
<h2>Enter the number of photos</h2>
<input
type="number"
id="input"
class="input"
value="2"
min="1"
max="10"
/>
<small class="errorMessage" id="errorMessage">Error Message</small>
<button class="btn" id="btn">Get Photos</button>
<div class="gallery" id="gallery">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice API requests, async/await, and input values with these related projects.
Best match
Related: async/awaitIntermediate
Random Emoji
Request and render a randomly selected emoji.
Build a random emoji →
Related: input valuesIntermediate
Image Search App
Turn a search term into a gallery of API results.
Build an image search app →Related: API requestsBest match
Weather App
Request current weather data and display the response clearly.
Build a weather appRelated: async/await
Random Emoji
Request and render a randomly selected emoji.
Build a random emojiRelated: input values
Image Search App
Turn a search term into a gallery of API results.
Build an image search app