Best matchRelated: API requestsIntermediate
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo gallery →Image Search App
Build an image search app 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
Image Search App
This project shows you how HTML, CSS, and JavaScript work together in an image search app. You’ll send a search request, render image results, and load additional pages, then practice API requests, async and await, and click events as you build the complete project from scratch.
02 — Included
- Live API-powered results
- Image Search App 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
- Change styles by updating CSS classes
- Update content on the page
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, DOM selection and form events.
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
image-search-app/
<!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>Image Search App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Image Search App</h1>
<form>
<input type="text" id="search-input" placeholder="Search for images..." />
<button id="search-button">Search</button>
</form>
<div class="search-results">
<!-- <div class="search-result">
<img
src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
alt="image"
/>
<a
href="https://unsplash.com/photos/g-7X6T7vAI4"
target="_blank"
rel="noopener noreferrer"
>an image of a beach</a
>
</div>
<div class="search-result">
<img
src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
alt="image"
/>
<a
href="https://unsplash.com/photos/g-7X6T7vAI4"
target="_blank"
rel="noopener noreferrer"
>an image of a beach</a
>
</div>
<div class="search-result">
<img
src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
alt="image"
/>
<a
href="https://unsplash.com/photos/g-7X6T7vAI4"
target="_blank"
rel="noopener noreferrer"
>an image of a beach</a
>
</div> -->
</div>
<button id="show-more-button">Show more</button>
<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
Recipe Book App
Transform recipe data into useful, dynamic recipe cards.
Build a recipe book app →
Related: input valuesIntermediate
English Dictionary
Look up a word and turn the API response into a useful definition.
Build an english dictionary →Related: API requestsBest match
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo galleryRelated: async/await
Recipe Book App
Transform recipe data into useful, dynamic recipe cards.
Build a recipe book appRelated: input values
English Dictionary
Look up a word and turn the API response into a useful definition.
Build an english dictionary