Made bug fixes and removed unused images

Sponsor.html

@@ -96,7 +96,7 @@ <h3>Why Sponsor Us?</h3>
                 assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1200w.webp?width=1200 1200w,
                 assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.webp?width=1920 1920w
               "
-              sizes="(max-width: 768px) 70vw, 30vw"
+              sizes="(max-width: 768px) 88vw, 100vw"
             />
             <img
               src="assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.jpg"
@@ -107,7 +107,7 @@ <h3>Why Sponsor Us?</h3>
                 assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1200w.jpg?width=1200 1200w,
                 assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.jpg?width=1920 1920w
               "
-              sizes="(max-width: 768px) 70vw, 30vw"
+              sizes="(max-width: 768px) 88vw, 100vw"
               alt="Group photo of the 2024 rover reveal with Viator"
             />
           </picture>
@@ -205,7 +205,6 @@ <h3>How to Support Us: Step-by-Step Guide</h3>
                 assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1920w.webp?width=1920 1920w
               "
               sizes="(max-width: 768px) 70vw, 20vw"
-
             />
             <img
               src="assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.jpg"

assets/javascript/Event.js

@@ -304,24 +304,6 @@ function openPopup(eventData) {
   popup.style.display = "flex";
 }
 
-// // Adding event listeners to each card
-// document.querySelectorAll('.event-card').forEach((card, index) => {
-//   card.addEventListener('click', () => {
-//     console.log("activated")
-//     console.log(window.innerWidth)
-//     if (window.innerWidth >= 1000) {
-//         openPopup(events[index]);
-//     }
-//   });
-// });
-
-// // Closing the popup when clicking outside of the popup content
-// popup.addEventListener('click', (e) => {
-//   if (e.target === popup) {
-//     popup.style.display = "none";
-//   }
-// });
-
 function addPopupEventListeners() {
   document.querySelectorAll(".event-card").forEach((card, index) => {
     card.addEventListener("click", () => {

assets/javascript/getInstagramPosts.js

@@ -4,6 +4,7 @@ async function getInstagramPosts() {
   const photoContainer = $("#photoContainer");
   photoContainer.empty();
   try {
+    //Only attempt to fetch if the JSON data isn't present in local storage.
     if (!data) {
       //const response = await fetch('FETCH URL');
       if (true /*response.ok*/) {
@@ -1221,25 +1222,24 @@ async function getInstagramPosts() {
         throw new Error("Error recieving behold fetch");
       }
     }
+
+    //Parses the JSON and renders each post.
     JSON.parse(data).posts.forEach((post) => {
       const link = $(`<a href = '${post.permalink}' target = '_blank'></a>`);
       const icon = $(
         `<img class = "postIconOverlay" src = "assets/images/icons/InstagramIcon.svg" alt = "Instagram icon"/>`
       );
-      const picture = $(`<img />`);
+      const picture = $(`<img src = "${post.sizes.small.mediaUrl}" srcset =
+        "${post.sizes.small.mediaUrl} 768w, ${post.sizes.medium.mediaUrl} 1200w" alt = "${post.caption}"/>`);
 
-      picture.attr("src", post.sizes.small.mediaUrl);
-      picture.attr(
-        "srcset",
-        `${post.sizes.small.mediaUrl} 768w, ${post.sizes.medium.mediaUrl} 1200w`
-      );
-      picture.attr("alt", post.caption);
       link.append(icon);
       link.append(picture);
       photoContainer.append(link);
     });
   } catch (err) {
     console.log(err);
+
+    //Renders an error mesage and retry button.
     const errorMessage = $("<h4>Error Loading Instagram Feed</h4>");
     const refreshButton = $("<button>Refresh</button>");
     refreshButton.click(getInstagramPosts);

assets/javascript/imageGallery.js

@@ -1,20 +1,27 @@
 let imgIdx = 0;
+
+//Gets all images and sets the one at the initial index to display.
 const images = $("#galleryImagesContainer img");
 images.get(imgIdx).style.display = "inline-block";
 
+//Set click event listeners to set the current image
 $("#backArrow").click(function () {
-  imgIdx--;
-  setCurrImage();
+  setCurrImage(-1);
 });
 
 $("#forwardArrow").click(function () {
-  imgIdx++;
-  setCurrImage();
+  setCurrImage(1);
 });
 
-function setCurrImage() {
+function setCurrImage(idxMod) {
+  //Modifies the imgIdx by the passed in idxMod.
+  imgIdx += idxMod;
+
+  //If the current image index is outside the bounds, reset it so the order wraps around.
   if (imgIdx < 0) imgIdx = images.length - 1;
   else if (imgIdx >= images.length) imgIdx = 0;
+
+  //Set the display of all images to none except the one at the current index.
   images.each(function (i, obj) {
     obj.style.display = i === imgIdx ? "inline-block" : "none";
   });

assets/scss/HomePage.css

@@ -74,7 +74,7 @@ main div#starBackgroundSection section div.imageContainer div#galleryImagesConta
 main div#starBackgroundSection section picture.imageContainer div#galleryImagesContainer picture img {
   display: none;
   width: 100%;
-  aspect-ratio: 16/9;
+  aspect-ratio: 3/2;
   height: auto;
   -o-object-fit: cover;
      object-fit: cover;
@@ -300,12 +300,6 @@ main div#starBackgroundSection::before {
   left: 0;
   background-color: hsla(250, 40%, 10%, 0.4);
 }
-main div#starBackgroundSection section#teamCompetitionSection {
-  flex-direction: column;
-  text-align: center;
-  padding: 0em 7vw;
-}
-
 @media only screen and (max-width: 768px) {
   main div#introductionSection,
   main div#starBackgroundSection {
@@ -328,7 +322,6 @@ main div#starBackgroundSection section#teamCompetitionSection {
   main div#introductionSection section div.imageContainer div#galleryImagesContainer img,
   main div#starBackgroundSection section picture.imageContainer div#galleryImagesContainer img,
   main div#starBackgroundSection section div.imageContainer div#galleryImagesContainer img {
-    display: none;
     width: 100%;
     height: 50svh;
     -o-object-fit: cover;

assets/scss/HomePage.scss

@@ -68,7 +68,7 @@ main {
           picture img {
             display: none;
             width: 100%;
-            aspect-ratio: 16 / 9;
+            aspect-ratio: 3 / 2;
             height: auto;
             object-fit: cover;
             border: hsl(222, 61%, 87%) 0.5em solid;
@@ -296,16 +296,7 @@ main {
     background-color: hsla(250, 40%, 10%, 40%);
   }
 
-  div#starBackgroundSection {
-    section#teamCompetitionSection {
-      flex-direction: column;
-      text-align: center;
-      padding: 0em 7vw;
-    }
-  }
-}
-@media only screen and (max-width: 768px) {
-  main {
+  @media only screen and (max-width: 768px) {
     div#introductionSection,
     div#starBackgroundSection {
       padding: 3em 6vw;
@@ -319,13 +310,11 @@ main {
         picture.imageContainer,
         div.imageContainer {
           width: 100%;
-          div#galleryImagesContainer {
-            img {
-              display: none;
-              width: 100%;
-              height: 50svh;
-              object-fit: cover;
-            }
+
+          div#galleryImagesContainer img {
+            width: 100%;
+            height: 50svh;
+            object-fit: cover;
           }
         }
 
@@ -336,9 +325,11 @@ main {
             div {
               padding: 0.7em 0;
             }
+
             img {
               padding: 0.7em;
             }
+
             img.leftPointArrow {
               display: none !important;
             }
@@ -363,12 +354,15 @@ main {
     section#missionSection {
       background-color: black;
       overflow-y: visible;
+
       h2 {
         margin-bottom: 3vh;
       }
+
       div#cardContainer {
         flex-direction: column;
         gap: 2em;
+
         article {
           flex-direction: row;
           background-color: hsl(0, 0%, 19%);

assets/scss/OurStory.css

@@ -172,9 +172,10 @@ main section#teamInstagramSection div#photoContainer:has(button) {
 main section#teamInstagramSection div#photoContainer:has(button) h4 {
   color: hsl(0, 100%, 99%);
   font-size: calc(1rem + 0.4vw);
+  text-align: center;
 }
 main section#teamInstagramSection div#photoContainer:has(button) button {
-  width: 25%;
+  width: 25vw;
   background-color: hsl(133, 97%, 38%);
   padding: 1.5em 0.5em;
   margin: 1em 0;
@@ -186,20 +187,6 @@ main section#teamInstagramSection div#photoContainer:has(button) button {
 main section#teamInstagramSection div#photoContainer:has(button) button:hover {
   background-color: hsl(133, 91%, 29%);
 }
-main section#teamCompetitionSection {
-  text-align: center;
-  padding: 4em 12vw;
-}
-main section#teamCompetitionSection div#awardLogoContainer {
-  display: flex;
-  justify-content: space-between;
-  padding: 6em 0;
-}
-main section#teamCompetitionSection div#awardLogoContainer img {
-  height: 8em;
-  width: auto;
-}
-
 @media only screen and (max-width: 768px) {
   main section#teamTextSection div {
     flex-direction: column;

assets/scss/OurStory.scss

@@ -93,6 +93,7 @@ main {
         width: 40%;
       }
     }
+
     article {
       padding: 1.5em 0;
 
@@ -203,9 +204,11 @@ main {
       h4 {
         color: hsl(0, 100%, 99%);
         font-size: calc(1rem + 0.4vw);
+        text-align: center;
       }
+
       button {
-        width: 25%;
+        width: 25vw;
         background-color: hsl(133, 97%, 38%);
         padding: 1.5em 0.5em;
         margin: 1em 0;
@@ -214,29 +217,13 @@ main {
         border-radius: 1em;
         cursor: pointer;
       }
+
       button:hover {
         background-color: hsl(133, 91%, 29%);
       }
     }
   }
-  section#teamCompetitionSection {
-    text-align: center;
-    padding: 4em 12vw;
-
-    div#awardLogoContainer {
-      display: flex;
-      justify-content: space-between;
-      padding: 6em 0;
-
-      img {
-        height: 8em;
-        width: auto;
-      }
-    }
-  }
-}
-@media only screen and (max-width: 768px) {
-  main {
+  @media only screen and (max-width: 768px) {
     section#teamTextSection {
       div {
         flex-direction: column;
@@ -280,6 +267,7 @@ main {
 
     section#teamInstagramSection {
       padding: 2em 6vw;
+
       div#photoContainer {
         margin: 2em 0;
         grid-template-columns: 1fr 1fr;