PROJECT COMPONENTS A complete photo gallery must feature the following components on the HTML web page: 1. A Title (e.g. Animals in Character in the screenshot above). 2. Five thumbnail images (refer...



PROJECT COMPONENTS

A complete photo gallery must feature the following components on the HTML web page:
1. A Title (e.g. Animals in Character in the screenshot above).
2. Five thumbnail images (refer to "Sourcing Free, High-Resolution Images on the Internet" below).
3. Large image areatodisplay a larger version of the selected thumbnail image.
4. Descriptive captions that are relevant to the image being displayed(50 words or less).











PROJECT FUNCTIONALITY

A complete photo gallery must provide the following functionality:
1. A JavaScript mouse event will:
(a)Display the matching caption when the thumbnail image is hovered over.
2. JavaScript functions (2 or 3) will:
(a)Add a border to a thumbnailimage when it is clicked, remove the border when anotherthumbnail image is clicked (hint: use a for loop that targets CSSclasses)*.
(b) Display the selected thumbnail in the large image area (hint: use an if/else statement)*.
(c)Add or alter any element in the DOM.


NOTE





1:
*(a) and (b) above may be combined into one function.






PROJECT REQUIREMENTS

The zipped file attached to this assignment provides the folder structure that is required for this project. Instructions for how to unzip the file on a PC or a Mac can be found at visithttps://www.wikihow.tech/Extract-Zip-Files. Individual files have also been provided. All files must be externally linked in their respective image, style, and script folders. Points will be deducted if embedded or inline styles are used where not instructed.


1. Image dimensions must be800 pixels (width) x 400 pixels (height) and stored externally in a separate image folder.
2. Only use the index.html template to create your photo gallery.
3. Use the style.css file to store stylesin a separate CSS folder.
4. Use the image-gallery.js file to store function(s) externally in a separate JavaScript folder.
5. Use // to document your code by providing comments that explain the purpose

Jun 30, 2022
SOLUTION.PDF

Get Answer To This Question

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here