Q:

Modify provided template from chapter 5 example (photo viewer) to include the following features:

1. When the user clicks on a picture and it opens a window containing a zoomed version of the image, give her a hyperlink (button) to add the pic to a favorites area at the bottom of the first page (add img nodes to the DOM).

2. A maximum of 5 pics can be added to the favorites. After that a message is displayed to remove at least one favorite first.

3. If the user clicks on a favorite, a Remove link (button) shows up next to that picture. If the user clicks it, the pic is removed from the favorites.

4. Use good web design practices to enhance visually your html page. Add your name and student number, colors, copyright line, etc

This is the HTML Page:

Interactive Slideshow

To view your slides:

• Click the Right or Left arrow buttons to move forward or backward through the image list.
• Click the Play/Pause button to automatically move forward through the image list.
• Click an image to view it in full screen mode.

This is the first JavaScript File:

"use strict";

window.addEventListener("load", createLightbox);

function createLightbox() {

// Lightbox Container

let lightBox = document.getElementById("lightbox");

// Parts of the lightbox

let lbTitle = document.createElement("h1");

let lbCounter = document.createElement("div");

let lbPrev = document.createElement("div");

let lbNext = document.createElement("div");

let lbPlay = document.createElement("div");

let lbImages = document.createElement("div");

// Design the lightbox title

lightBox.appendChild(lbTitle);

lbTitle.id = "lbTitle";

lbTitle.textContent = lightboxTitle;

// Design the lightbox slide counter

lightBox.appendChild(lbCounter);

lbCounter.id = "lbCounter";

let currentImg = 1;

lbCounter.textContent = currentImg + " / " + imgCount;

// Design the lightbox previous slide button

lightBox.appendChild(lbPrev);

lbPrev.id = "lbPrev";

lbPrev.innerHTML = "◀";

lbPrev.onclick = showPrev;

// Design the lightbox next slide button

lightBox.appendChild(lbNext);

lbNext.id = "lbNext";

lbNext.innerHTML = "▶";

lbNext.onclick = showNext;

// Design the lightbox Play-Pause button

lightBox.appendChild(lbPlay);

lbPlay.id = "lbPlay";

lbPlay.innerHTML = "⏯";

let timeID;

lbPlay.onclick = function() {

if (timeID) {

// Stop the slideshow

window.clearInterval(timeID);

timeID = undefined;

} else {

// Start the slideshow

showNext();

timeID = window.setInterval(showNext, 1500);

}

}

// Design the lightbox images container

lightBox.appendChild(lbImages);

lbImages.id = "lbImages";

// Add images from the imgFiles array to the container

for (let i = 0; i < imgCount; i++) {

let image = document.createElement("img");

image.src = imgFiles[i];

image.alt = imgCaptions[i];

image.onclick = createOverlay;

lbImages.appendChild(image);

}

// Function to move forward through the image list

function showNext() {

lbImages.appendChild(lbImages.firstElementChild);

(currentImg < imgCount) ? currentImg++ : currentImg = 1;

lbCounter.textContent = currentImg + " / " + imgCount;

}

// Function to move backward through the image list

function showPrev() {

lbImages.insertBefore(lbImages.lastElementChild, lbImages.firstElementChild);

(currentImg > 1) ? currentImg-- : currentImg = imgCount;

lbCounter.textContent = currentImg + " / " + imgCount;

}

function createOverlay() {

let overlay = document.createElement("div");

overlay.id = "lbOverlay";

// Add the figure box to the overlay

let figureBox = document.createElement("figure");

overlay.appendChild(figureBox);

// Add the image to the figure box

let overlayImage = this.cloneNode("true");

figureBox.appendChild(overlayImage);

// Add the caption to the figure box

let overlayCaption = document.createElement("figcaption");

overlayCaption.textContent = this.alt;

figureBox.appendChild(overlayCaption);

// Add a close button to the overlay

let closeBox = document.createElement("div");

closeBox.id = "lbOverlayClose";

closeBox.innerHTML = "×";

closeBox.onclick = function() {

document.body.removeChild(overlay);

}

overlay.appendChild(closeBox);

document.body.appendChild(overlay);

}

}

This is the second Javascript File:

"use strict";

let lightboxTitle = "My Western Vacation";

// Names of the image files shown in the slideshow

let imgFiles = ["photo01.jpg", "photo02.jpg", "photo03.jpg", "photo04.jpg",

"photo05.jpg", "photo06.jpg", "photo07.jpg", "photo08.jpg",

"photo09.jpg", "photo10.jpg", "photo11.jpg", "photo12.jpg"]

// Captions associated with each image

let imgCaptions = new Array(12);

imgCaptions[0]="Sky Pond (Rocky Mountain National Park)";

imgCaptions[1]="Buffalo on the Plains (South Dakota)";

imgCaptions[2]="Garden of the Gods (Colorado Springs)";

imgCaptions[3]="Elephant Head Wild Flower (Rocky Mountain National Park)";

imgCaptions[4]="Double Rainbow (Colorado National Monument)";

imgCaptions[5]="Moose in the Wild (Grand Lake, Colorado)";

imgCaptions[6]="Camas Wild Flower (Rocky Mountain National Park)";

imgCaptions[7]="Chasm Lake (Rocky Mountain National Park)";

imgCaptions[8]="Teton Crest Trail (Grand Teton National Park)";

imgCaptions[9]="The Notch Trail (Badlands National Park)";

imgCaptions[10]="Sprague Lake (Rocky Mountain National Park)";

imgCaptions[11]="Longs Peak Trail (Rocky Mountain National Park)";

// Count of images in the slideshow

let imgCount = imgFiles.length;

Please help me answer the questions through this template. Where should I make changes and add coding to answer the questions above.. Please take a screenshot of how it would look like in Visual Studio code and post it with the text for the answer.