Project: Gallery app

JavaScript course · Intermediate · Lesson 95/134

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 container
div.gallery: the grid of small images
div.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

Project: Gallery app