Day 9: Dynamic Image Gallery with JS Loops

Reminders for Tony

  1. Put on mic
  2. Open Zoom chat
  3. Record! Anyone else?

Housekeeping

  • Daily Schedule Update:
    • Lunch: 11am-12:30pm
    • End of day: 2pm
  • If you need extra help:
    • There will be an open question period from 11-11:30am and 2-2:45pm.
    • Tony will also be available for one-on-one sessions weekday evenings and Saturday afternoons. DM him in Discord to set up an appointment.

Topics covered

Goal for the day

By the end of the day, you should have a gallery that is dynamically built from an array using a loop.

Topic 1: Creating an array

Arrays are generally described as “list-like objects”; they are basically single objects that contain multiple values stored in a list. For today’s activities we’ll be using an array to display an image gallery.

We will be using the following sample code and images:

Gallery starter code

Activity objectives:

  1. Using the sample Javascript code listed above, create a simple array containing the image IDs listed in gallery.js.

       const images = [237, 433, ...];

  2. Using Element.innerHTML display a random Lorem Picsum image (250px x 250px) on a web page using the following format:

       <img src="https://picsum.photos/id/:imageId/250/250" alt="Random Lorem Picsum">

Topic 2: Looping through an array

Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you’ve got a lot of similar items of work to complete. Here we’ll use a loop structure to generate a list of HTML images.

Looping basics

Activity objectives:

  1. Using the array created earlier and a for loop (or similar), log each image Id to the console.
  2. Using that same loop, generate a list of HTML images and add them to a web page using Element.innerHTML.
    • hint: Javascript has an addition assignment operator that might help you glue strings together.
  3. Use splice() to show a subset of the image list (similar to a paginated web page).

Mid-day Huddle

  • who needs help?
  • any pivots?
  • any show-and-tell?

[lunch]

Our array of image IDs gets the job done but it would be nice to have more descriptive alt text. For this, we need more complex data structures.

Activity objectives

  1. Refactor your array of image IDs to include the title from our original source list. Instead of an array of numbers (the image IDs) use an array of arrays to include title as a second item for each image.

     const images = [
   [237, 'Puppy'],
   [433, 'Bear'],
   ...
 ]

  2. Refactor your HTML gallery to include the title as custom alt text for each image:

     <img src="https://picsum.photos/id/:imageId/250/250" alt="[title]">

  3. Try adding the fileName to your new array and link your images locally using the source files provided.

Summary

  • any trophies?
  • prep for tomorrow?
  • applause

Categories:

Updated: