2023年11月25日

HTML代写 | Course name: Coding Multi-Part Problems

本次美国代写主要为HTML相册相关的assignment

Course name: Coding Multi-Part Problems

Part I: Course Project, Part One —
Manage an Array of Photos

https://lms.ecornell.com/courses/1568136/assignments/8985389
Manage an Array of Photos
About this project
Cornell University’s Office of Alumni Affairs and Development is putting together a campus-
themed photo gallery for Alumni Weekend and needs your help with the implementation.

They already have an HTML template but need you to write the JavaScript to display the
main photo and generate a thumbnail gallery of images.
The office has given you the following list of photo paths (i.e., relative links to the images
stored on the server) they would like displayed in the gallery:
Image
images/bailey.jpg
images/fireworks.jpg
images/arts-quad.jpg
images/overlook.jpg
images/uris.jpg
Finished Gallery
When finished, the office hopes that their gallery will look something like this:

Pseudocode Plan
Below, we provide a pseudocode plan to help you complete this project:
When the window loads…

Set a variable to a new indexed array of image paths (TODO 1)
Set a variable to a reference to the thumbnail ribbon element (ID:
thumbnailRibbon) (TODO 2)

Use a for of loop to generate the thumbnails for each path in the
array (TODO 3)
Set a variable to a newly created image element. Add the
“thumbnail” class and set the source (TODO 3.1)
Attach an event listener to each thumbnail that sets the
mainImage to the clicked-upon thumbnail (TODO 3.2)
Append the created thumbnail element to the ribbon (TODO 3.3)

Set the main image’s source to the first path in the array (TODO 4)

Implementation
When the “open gallery” button is clicked, your JavaScript should populate the thumbnail
ribbon and set the main image to the first image path in the array.
TODO 1: Construct an Image Path Array
Let’s start by creating an indexed array with the paths of the images we’ll include in the
gallery. Refer to the list of photo paths above.

TODO 2: Save a Reference to the Thumbnail Ribbon Element
Store a reference to the thumbnail ribbon element (ID: thumbnailRibbon) in a variable. This
will let us easily reference the thumbnail ribbon when populating it.

TODO 3: Populate the Thumbnail Ribbon
To populate the thumbnail ribbon, our syntax should iterate over each photo path in the
indexed array from TODO 1.
1. For each of these photo paths, create an image element, set its source attribute (the
path or relative link to the actual image, as listed above), and add the “thumbnail”
class.
2. Attach an event listener (provided).
3. Then, each of these newly created image elements should be appended (added) to
the thumbnail ribbon (ID: thumbnailRibbon).
To assist you in this task, we’ve provided some helpful documentation below.