Can someone please help me with this assignment
Modify the chapter 5 example (photo viewer) to include the following features:
1. When the users click on a picture and it opens a div containing a zoomed version of the image,
add a hyperlink (button) to allow users to insert the clicked picture to a favorites list area at the
bottom of the first page (add img nodes to the DOM). BONUS (10%): Show the zoomed version
on a new window.
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 picture, a Remove link (button/anchor) shows up next to that
picture. If the user clicks it, the pic is removed from the favorites.
4. (10% of the grade) Use good web design practices to enhance visually your html page. Add a
title, picture, copyright line, etc.
I need to modify the follow code to add the above features
HTML
Chapter 5 Case ProblemInteractive 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.
JavaScript
"use strict";
/* JavaScript 7th Edition
Chapter 5
Chapter Case
Application to generate a slide show
Author:
Date:
Filename: js05.js
*/
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 !== undefined){
// Stop the slideshow
clearInterval(timeID);
timeID = undefined;
}else{
// Start the slideshow
showNext();
timeID = 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].
Can someone please help me with this assignmentModify the chapter .pdf
1. Can someone please help me with this assignment
Modify the chapter 5 example (photo viewer) to include the following features:
1. When the users click on a picture and it opens a div containing a zoomed version of the image,
add a hyperlink (button) to allow users to insert the clicked picture to a favorites list area at the
bottom of the first page (add img nodes to the DOM). BONUS (10%): Show the zoomed version
on a new window.
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 picture, a Remove link (button/anchor) shows up next to that
picture. If the user clicks it, the pic is removed from the favorites.
4. (10% of the grade) Use good web design practices to enhance visually your html page. Add a
title, picture, copyright line, etc.
I need to modify the follow code to add the above features
HTML
Chapter 5 Case ProblemInteractive 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.
JavaScript
"use strict";
/* JavaScript 7th Edition
Chapter 5
Chapter Case
Application to generate a slide show
Author:
Date:
Filename: js05.js
*/
window.addEventListener("load", createLightbox);
function createLightbox() {
2. // 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);
3. lbPlay.id = "lbPlay";
lbPlay.innerHTML = "";
let timeID;
lbPlay.onclick = function(){
if(timeID !== undefined){
// Stop the slideshow
clearInterval(timeID);
timeID = undefined;
}else{
// Start the slideshow
showNext();
timeID = 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 showNext(){
lbImages.appendChild(lbImages.firstElementChild);
(currentImg < imgCount) ? currentImg++ : currentImg = 1;
lbCounter.textContent = currentImg + " / " + imgCount;
}
function showPrev(){
lbImages.insertBefore(lbImages.lastElementChild, lbImages.firstElementChild);
(currentImg > 1) ? currentImg-- : currentImg = imgCount;
4. 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);
// Append to the body of the document
document.body.appendChild(overlay);
}
}
