From 508c38051738778009872094d96f315116252df7 Mon Sep 17 00:00:00 2001
From: Sergio Santos <64509249+clowjs@users.noreply.github.com>
Date: Tue, 28 Nov 2023 10:16:30 -0300
Subject: [PATCH 1/3] Fixed all issues

---
 src/scripts.js | 59 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/scripts.js b/src/scripts.js
index 5bce8ec..d6ff9ac 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -8,14 +8,61 @@ document.addEventListener("DOMContentLoaded", () => {
   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
+  // Event Listeners
 
-  // 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.
+  images.forEach((image, index) => {
+    image.addEventListener('click', () => {
+      openModal(index);
+    });
+  });
 
-  // TODO: (Issue #3) Add an event listener for the closeBtn to close the modal
+  window.addEventListener("click", (event) => {
+    if (event.target === modal) {
+      closeModal();
+    }
+  });
 
-  // TODO: (Issue #3) Add an event listener to close the modal when clicking the modal background
+  prevBtn.addEventListener('click', () => {
+    showPrevImage();
+  });
+  
+  nextBtn.addEventListener('click', () => {
+    showNextImage();
+  });
 
-  // TODO: (Issue #4) Create a function to update the state of the navigation buttons based on currentImageIndex
+  closeBtn.addEventListener('click', () => {
+    closeModal();
+  });
+
+  // Functions
+
+  function openModal(index) {
+    modal.className = "modal";
+    modalImage.src = images[index].src;
+    currentImageIndex = index;
+    updateButtonState();
+  };
+
+  function closeModal() {
+    modal.className = "modal hidden";
+  };
+
+  function showPrevImage() {
+    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
+    modalImage.src = images[currentImageIndex].src;
+    updateButtonState();
+  }
+
+  function showNextImage() {
+    currentImageIndex = (currentImageIndex + 1) % images.length;
+    modalImage.src = images[currentImageIndex].src;
+    updateButtonState();
+  }
+
+  function updateButtonState() {
+    prevBtn.disabled = currentImageIndex === 0;
+    nextBtn.disabled = currentImageIndex === images.length - 1;
+  };
+
+  updateButtonState();
 });

From 28b2e6af6fcd1d06fa3320a6c31a8acf011fe296 Mon Sep 17 00:00:00 2001
From: Sergio Santos <64509249+clowjs@users.noreply.github.com>
Date: Tue, 28 Nov 2023 10:23:39 -0300
Subject: [PATCH 2/3] Second Try

---
 src/scripts.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts.js b/src/scripts.js
index d6ff9ac..1a64745 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -37,14 +37,14 @@ document.addEventListener("DOMContentLoaded", () => {
   // Functions
 
   function openModal(index) {
-    modal.className = "modal";
+    modal.classList.remove("hidden");
     modalImage.src = images[index].src;
     currentImageIndex = index;
     updateButtonState();
   };
 
   function closeModal() {
-    modal.className = "modal hidden";
+    modal.classList.add("hidden");
   };
 
   function showPrevImage() {

From ad66f9c13cb1165f1fba90520007105042dd97a5 Mon Sep 17 00:00:00 2001
From: Sergio Santos <64509249+clowjs@users.noreply.github.com>
Date: Tue, 28 Nov 2023 10:27:45 -0300
Subject: [PATCH 3/3] Third try

---
 src/scripts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts.js b/src/scripts.js
index 1a64745..e79a2e9 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
-  window.addEventListener("click", (event) => {
+  modal.addEventListener("click", (event) => {
     if (event.target === modal) {
       closeModal();
     }