Index: ProductPage.js
===================================================================
--- ProductPage.js	(revision e3d4e0a8bc0f13135f27c0b055b5c00f64a28f01)
+++ ProductPage.js	(revision e3d4e0a8bc0f13135f27c0b055b5c00f64a28f01)
@@ -0,0 +1,31 @@
+let featuedImg = document.getElementById('featured-image');
+let smallImgs = document.getElementsByClassName('small-Img');
+
+smallImgs[0].addEventListener('click', () => {
+    featuedImg.src = smallImgs[0].src;
+    smallImgs[0].classList.add('sm-card')
+    smallImgs[1].classList.remove('sm-card')
+    smallImgs[2].classList.remove('sm-card')
+    smallImgs[3].classList.remove('sm-card')
+})
+smallImgs[1].addEventListener('click', () => {
+    featuedImg.src = smallImgs[1].src;
+    smallImgs[0].classList.remove('sm-card')
+    smallImgs[1].classList.add('sm-card')
+    smallImgs[2].classList.remove('sm-card')
+    smallImgs[3].classList.remove('sm-card')
+})
+smallImgs[2].addEventListener('click', () => {
+    featuedImg.src = smallImgs[2].src;
+    smallImgs[0].classList.remove('sm-card')
+    smallImgs[1].classList.remove('sm-card')
+    smallImgs[2].classList.add('sm-card')
+    smallImgs[3].classList.remove('sm-card')
+})
+smallImgs[3].addEventListener('click', () => {
+    featuedImg.src = smallImgs[3].src;
+    smallImgs[0].classList.remove('sm-card')
+    smallImgs[1].classList.remove('sm-card')
+    smallImgs[2].classList.remove('sm-card')
+    smallImgs[3].classList.add('sm-card')
+})