JavaScript
Building the gallery grid
Create a card for each image with forEach and createElement and add it to the grid.
Building cards with forEach
For each image in the images array we need to build a card. forEach iterates the array and runs a callback for each item.
For each image:
- a card element with
document.createElement('figure') - the image with
document.createElement('img') - the source with
img.src = image.url - adding it with
gallery.appendChild(card)
We'll wrap these in a renderGrid function.
Attributes with template literals
To set the image source we assign a value to the img.src property. When the value comes from a variable, img.src = image.url is enough.
For more complex strings we use a template literal: inside backticks we embed an expression with ${...}. For example img.alt = `Image: ${image.title}` puts the title into the alternative text.
This way each card carries both an image and a heading.
Exercise Write the renderGrid function
Continue on top of the previous lesson's solution. Write a renderGrid function that takes an images parameter. With images.forEach, for each image create a figure, an img and a figcaption. Set img.src to image.url. Append img and figcaption to the figure, then append the figure to gallery.
Show example solution
Start with function renderGrid(images), inside images.forEach(function(image) {...}) create figure, img, figcaption with createElement, set img.src = image.url and append with gallery.appendChild(card).
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" }
];
async function fetchImages(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return await response.text();
} catch (error) {
console.log(error.message);
}
}
function renderGrid(images) {
images.forEach(function(image) {
const card = document.createElement("figure");
const img = document.createElement("img");
const caption = document.createElement("figcaption");
img.src = image.url;
img.alt = image.title;
caption.textContent = image.author;
card.appendChild(img);
card.appendChild(caption);
gallery.appendChild(card);
});
}
Test yourself
-
What does forEach do?
images.forEach(function(image) {
// ...
});
- It runs a function for each item
- It reverses the array
- It returns a new array
- It removes the first item
Show answer
It runs a function for each item — Correct! forEach calls the given function for each item.
-
Complete the appendChild call
gallery.____;
Show answer
gallery.appendChild(card);
-
Match the DOM methods
- createElement
- Creating an element
- appendChild
- Appending an element
- forEach
- Iterating an array
- img.src
- Image source
Next lesson: Large image view
