all is fixed supposedly

package.json

@@ -2,10 +2,10 @@
   "name": "parcel-project-template",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://johncleece.github.io/team-project",
+  "homepage": "https://mayotopia04.github.io/TheWatchSpot",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /team-project/"
+    "build": "parcel build src/*.html --public-url /TheWatchSpot/"
   },
   "repository": {
     "type": "git",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "modern-normalize": "^1.1.0",
-    "swiper": "^10.2.0"
+    "swiper": "^10.3.1"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.6.0",

src/index.html

@@ -9,14 +9,10 @@
       href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;1,600&display=swap"
       rel="stylesheet"
     />
-
     <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
   />
-
-    <link rel="icon" type="images/icon" href="./images/the-watch-logo.svg" />
-
     <link rel="stylesheet" href="./sass/index.scss" />
     <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js"></script>
     <title>The Watch Spot</title>
@@ -33,7 +29,7 @@
 
     <script src="./js/catalog-modal.js"></script>
     <script src="./js/slider.js"></script>
-    <script src="./js/sale.js"></script>
     <script src="./js/index.js"></script>
+    <script src="./js/sale.js"></script>
   </body>
 </html>

src/js/sale.js

@@ -1,11 +1,25 @@
 function displayImage(imageSrc) {
-  var imageContainer = document.getElementById('imagecontainer');
+  const imageContainer = document.getElementById('imagecontainer');
+  const imageElements = document.querySelectorAll('.sale-watch-preview');
+  // const imageSelected = document.querySelector(`.imageselected-${imageSrc}`);
+
+  // const imageActive = document.querySelector('.activeimage');
+
+
+
   // Create a new image element
-  var img = document.createElement('img');
-  img.src = imageSrc;
-  img.alt = 'Selected Image';
+  imageElements.forEach(element => {
+    element.classList.remove('activeimage');
+  });
+  imageElements[imageSrc].classList.add('activeimage');
+
+
+  // imageActive.classList.remove('activeimage');
+  // imageSelected.classList.toggle('activeimage');
+
+
   // Clear the contents of the image container
-  imageContainer.innerHTML = '';
+
   // Append the selected image to the container
-  imageContainer.appendChild(img);
+
 }