Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active February 15, 2022 12:40
Show Gist options
  • Save acidtone/0c3caca6908b650c17b605f4242ff004 to your computer and use it in GitHub Desktop.
Save acidtone/0c3caca6908b650c17b605f4242ff004 to your computer and use it in GitHub Desktop.
Download ZIP
JS Activity: Array.forEach() - Create an array of Lorem Picsum images from an array of ids
Raw
README.md

JS Activity: Array.forEach() - Create a gallery of Lorem Picsum images from an array of image id's

In this activity, you will take a list of image IDs listed in picsum-list.js and create a gallery of images using the Lorem Picsum service.

Lorem Picsum is an image service that allows you to embed placeholder photos into your web pages. The images are pulled from open-source Unsplash images.

For example, the following HTML displays this puppy image

<img src="https://picsum.photos/id/237/300/300" alt="Lorem Picsum Image">

Lorem Picsum Image

Instructions

  1. Create empty output variable that will contain the gallery images string.

  2. Create a function handleItem() that accepts the array item (the Picsum image id) as a parameter.

  3. In this new function, take the Picsum image id and create a valid img element that's 300px x 300px

    <img src="https://picsum.photos/id/[imageId]/300/300" alt="Lorem Picsum Image">

  4. Using Array.forEach(): loop through each Picsum image id, invoking handleItem() for each imageId.

  5. Using .innerHTML and the addition assignment operator (+=) (or another method of your choice), output the image to the <section> element in index.html so that a gallery of all images is displayed on the page.

Spoilers

See a potential answer to this activity.

Raw
index.html
<!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>Picsum Image List</title>
<link rel="stylesheet" href="main.css">
<script src="picsum-list.js" defer></script>
</head>
<body>
<h1>Picsum Image List</h1>
<section class="gallery">
</section>
</body>
</html>
Raw
main.css
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1024px;
margin: auto;
}
.gallery > * {
margin: 1em;
}
Raw
picsum-list.js
const picsumIds = [
237,
433,
577,
582,
593,
659,
718,
783,
790,
837,
1024,
1025,
1074,
1084
];
// 1. Create empty output variable that will contain the gallery images
// 2. Create a function `handleItem()` that accepts the array `item` (the Picsum image id) as a parameter
// 3. In this new function, take the Picsum image id and create a valid img element that's 300px x 300px
// <img src="https://picsum.photos/id/[imageId]/300/300" alt="Lorem Picsum Image">
// 4. Using Array.forEach(): loop through each Picsum image id, invoking handleItem() for each item.
// 5. Using a method of your choice, output the image to `index.html` so that a gallery of all images is displayed on the page
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment