JavaScript
Project: Gallery app
Overview of the 5-lesson gallery project: fetch images, grid and large view.
Project: Gallery app
In this 5-lesson project we'll build a gallery app: an image list is fetched from an API, small images are shown in a grid, and clicking a card opens a large view.
We'll combine these concepts:
async/await with fetch- building cards with
createElement - iterating with
forEach and adding with appendChild - listening for clicks with
addEventListener - toggling the large view with
classList
Each lesson builds on top of the previous one's solution.
The gallery skeleton
The gallery is built from three parts:
#app: the main containerdiv.gallery: the grid of small imagesdiv.modal: the large view that opens on click
By the end of the first lesson we'll have added an h1 heading and a div.gallery element inside #app. We'll also have a ready images array so it looks realistic; each item has url, title and author fields.
Exercise Add the heading and the grid to the container
In this first step, select the #app container, create an h1 element, set its text to "Gallery" and append it to the container. Then create a div, give it the gallery class, and append it to app as well. Finally, define an images array with at least one object (with url, title and author fields).
Show example solution
First select the container with getElementById, then create the h1 and div with createElement, set the class and append with appendChild. Finally define const images = [...].
Example solution:
// Gallery application
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Gallery";
app.appendChild(title);
const gallery = document.createElement("div");
gallery.className = "gallery";
app.appendChild(gallery);
const images = [
{ url: "https://picsum.photos/id/1/200/200", title: "Mountain view", author: "Alex" },
{ url: "https://picsum.photos/id/2/200/200", title: "City streets", author: "Mark" },
{ url: "https://picsum.photos/id/3/200/200", title: "Lakeside", author: "Zoe" }
];
Test yourself
-
What is the main flow of the gallery app?
- Grid first, fetch later
- Fetch, grid, large view in order
- Only the large view is shown
- Large view first, then the grid
Show answer
Fetch, grid, large view in order — Correct! We fetch the images, then build the grid, then add the large view.
-
Create a div with createElement
const gallery = document.____;
Show answer
const gallery = document.createElement('div');
-
Match concept to role
- fetch
- Fetching the image list
- createElement
- Building a card
- forEach
- Iterating each image
- addEventListener
- Listening for clicks
- classList
- Opening the large view
Next lesson: Fetching the image list
