From f52f8ccd3462c044f97c83475f5aad3f46a5b153 Mon Sep 17 00:00:00 2001 From: patricia-oliveira Date: Wed, 9 Aug 2023 10:52:06 +0100 Subject: [PATCH 1/4] Implement the functionality to display the clicked image in a modal --- src/scripts.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/scripts.js b/src/scripts.js index 5bce8ec..8b88f15 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -6,9 +6,13 @@ document.addEventListener("DOMContentLoaded", () => { const nextBtn = document.getElementById("nextBtn"); const images = Array.from(document.querySelectorAll(".image")); - let currentImageIndex = 0; - // TODO: (Issue #1) Add an event listener for each image in the gallery to show it in the modal when clicked + images.forEach((element) => { + element.addEventListener("click", (e) => { + modalImage.src = e.target.src; + modal.classList.remove("hidden"); + }); + }); // TODO: (Issue #2) Add event listeners for the prevBtn and nextBtn for modal navigation functionality // Clean Code Hint: Issue #1 and #2 both deal with updating the modal image based on currentImageIndex. Consider creating a function to handle this functionality. From aa125d8931f6f8e3d064ff26d70d4e771581eab9 Mon Sep 17 00:00:00 2001 From: patricia-oliveira Date: Wed, 9 Aug 2023 10:52:06 +0100 Subject: [PATCH 2/4] Add modal navigation button functionality for moving between images --- src/scripts.js | 44 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/src/scripts.js b/src/scripts.js index 8b88f15..10c1838 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -1,21 +1,47 @@ -document.addEventListener("DOMContentLoaded", () => { - const modal = document.getElementById("modal"); - const modalImage = document.getElementById("modalImage"); - const closeBtn = document.getElementById("closeBtn"); - const prevBtn = document.getElementById("prevBtn"); - const nextBtn = document.getElementById("nextBtn"); +const images = Array.from(document.querySelectorAll(".image")); +let currentImageIndex = 0; - const images = Array.from(document.querySelectorAll(".image")); +function addImageToModal(imageIndex) { + modalImage.src = images[imageIndex].src; +} +function activateImageModal() { images.forEach((element) => { element.addEventListener("click", (e) => { modalImage.src = e.target.src; modal.classList.remove("hidden"); + currentImageIndex = images.indexOf(element); }); }); +} + +function addInteractivityPreviousButton() { + prevBtn.addEventListener("click", (e) => { + currentImageIndex = currentImageIndex === 0 ? 0 : currentImageIndex - 1; + addImageToModal(currentImageIndex); + }); +} + +function addInteractivityNextButton() { + nextBtn.addEventListener("click", (e) => { + currentImageIndex = + currentImageIndex === images.length + ? images.length + : currentImageIndex + 1; + addImageToModal(currentImageIndex); + }); +} + +document.addEventListener("DOMContentLoaded", () => { + const modal = document.getElementById("modal"); + const modalImage = document.getElementById("modalImage"); + const closeBtn = document.getElementById("closeBtn"); + const prevBtn = document.getElementById("prevBtn"); + const nextBtn = document.getElementById("nextBtn"); - // TODO: (Issue #2) Add event listeners for the prevBtn and nextBtn for modal navigation functionality - // Clean Code Hint: Issue #1 and #2 both deal with updating the modal image based on currentImageIndex. Consider creating a function to handle this functionality. + activateImageModal(); + addInteractivityPreviousButton(); + addInteractivityNextButton(); // TODO: (Issue #3) Add an event listener for the closeBtn to close the modal From 0f145cc62f7aa2a8cea9b647f64ffc6c4dc1de8e Mon Sep 17 00:00:00 2001 From: patricia-oliveira Date: Wed, 9 Aug 2023 10:52:06 +0100 Subject: [PATCH 3/4] Close the modal when the close button is clicked and when clicking the modal background --- src/scripts.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/scripts.js b/src/scripts.js index 10c1838..3e1bfc6 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -32,6 +32,16 @@ function addInteractivityNextButton() { }); } +function activateModalClose() { + closeBtn.addEventListener("click", (e) => { + modal.classList.add("hidden"); + }); + + window.addEventListener("click", (event) => { + return event.target === modal ? modal.classList.add("hidden") : null; + }); +} + document.addEventListener("DOMContentLoaded", () => { const modal = document.getElementById("modal"); const modalImage = document.getElementById("modalImage"); @@ -42,10 +52,7 @@ document.addEventListener("DOMContentLoaded", () => { activateImageModal(); addInteractivityPreviousButton(); addInteractivityNextButton(); - - // TODO: (Issue #3) Add an event listener for the closeBtn to close the modal - - // TODO: (Issue #3) Add an event listener to close the modal when clicking the modal background + activateModalClose(); // TODO: (Issue #4) Create a function to update the state of the navigation buttons based on currentImageIndex }); From 82cc99465fd1507296ba2a3a037fbc6e903dee42 Mon Sep 17 00:00:00 2001 From: patricia-oliveira Date: Wed, 9 Aug 2023 10:52:06 +0100 Subject: [PATCH 4/4] Disable the navigation button when the first or last image is displayed --- src/scripts.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/scripts.js b/src/scripts.js index 3e1bfc6..f8f65ab 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -5,6 +5,11 @@ function addImageToModal(imageIndex) { modalImage.src = images[imageIndex].src; } +function handleNavigationButtonsState() { + prevBtn.disabled = currentImageIndex === 0; + nextBtn.disabled = currentImageIndex === images.length - 1; +} + function activateImageModal() { images.forEach((element) => { element.addEventListener("click", (e) => { @@ -18,6 +23,7 @@ function activateImageModal() { function addInteractivityPreviousButton() { prevBtn.addEventListener("click", (e) => { currentImageIndex = currentImageIndex === 0 ? 0 : currentImageIndex - 1; + handleNavigationButtonsState(); addImageToModal(currentImageIndex); }); } @@ -28,6 +34,7 @@ function addInteractivityNextButton() { currentImageIndex === images.length ? images.length : currentImageIndex + 1; + handleNavigationButtonsState(); addImageToModal(currentImageIndex); }); } @@ -53,6 +60,4 @@ document.addEventListener("DOMContentLoaded", () => { addInteractivityPreviousButton(); addInteractivityNextButton(); activateModalClose(); - - // TODO: (Issue #4) Create a function to update the state of the navigation buttons based on currentImageIndex });