Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active July 26, 2022 21:42
Show Gist options
  • Save acidtone/a5f40cda47c6d5c1a8e3815833572024 to your computer and use it in GitHub Desktop.
Save acidtone/a5f40cda47c6d5c1a8e3815833572024 to your computer and use it in GitHub Desktop.
Download ZIP
JS Activity: Picsum gallery with an array of objects
Raw
README.md

JS Activity: Dynamic Lorem Picsum gallery using an array of objects

In this activity, you will refactor the Picsum image gallery using an array of objects in animals.js:

  • Create custom alt attributes for each image;
  • Link the src of each image to a local jpg file;
  • Link each image so that clicking on the image redirects to the placeholder image on Lorem Picsum.

Instructions

  1. Download or fork/clone this Gist into your workspace.
  2. To this new workspace, add the lorem picsum images. Rename your directories as needed to follow file naming conventions.
  3. Replace the picsumIds array of numbers (in picsum-list.js with the picsumAnimals array of objects in animals.js.
  4. Make the following upgrades to picsum-list.js using picsumAnimals:
    1. Refactor the img links so that the image src is hosted from a local images directory.
    2. Create custom alt attributes for each image using the title property. For example, instead of "Lorem Picsum Image" for Image 237, try "Cute Puppy Photo".
    3. Wrap <a> links around each image so that clicking them will redirect the user to the placeholder image on Lorem Picsum.

When you are finished with the above changes, your gallery images should look like this:

<a href="https://picsum.photos/id/237">
  <img src="images/md/237.jpg" alt="Cute Puppy Photo">
</a>
  • Note: since you are using directories in this activity, you will not be able to use a Gist to save your work. Instead, create a full repo on GitHub.
Raw
animals.js
const picsumAnimals = [
{
id: 237,
title: 'Puppy',
src: '237.jpg'
},
{
id: 433,
title: 'Bear',
src: '433.jpg'
},
{
id: 577,
title: 'Moose',
src: '577.jpg'
},
{
id: 582,
title: 'Coyote',
src: '582.jpg'
},
{
id: 593,
title: 'Tiger',
src: '593.jpg'
},
{
id: 659,
title: 'Husky',
src: '659.jpg'
},
{
id: 718,
title: 'Wolf',
src: '718.jpg'
},
{
id: 783,
title: 'Monkey',
src: '783.jpg'
},
{
id: 790,
title: 'Elk',
src: '790.jpg'
},
{
id: 837,
title: 'Bulldog',
src: '837.jpg'
},
{
id: 1024,
title: 'Bird',
src: '1024.jpg'
},
{
id: 1025,
title: 'Pug',
src: '1025.jpg'
},
{
id: 1074,
title: 'Big Cat',
src: '1074.jpg'
},
{
id: 1084,
title: 'Walrus',
src: '1084.jpg'
}
];
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>Document</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
];
let output = '';
picsumIds.forEach(function(imageId){
output += `<img src="https://picsum.photos/id/${imageId}/300/300" alt="Lorem Picsum Image">`
});
const gallery = document.querySelector('.gallery');
gallery.innerHTML = output;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment