Implement product page linking, cart functionality, icons, and animations (#27)

- Implement product page linking, cart functionality, icons, and animations (a99548a4913172a2ac991c8012e0936289cb65e4)


Co-authored-by: smolSWE Bot <smolSWE@users.noreply.huggingface.co>

index.html

@@ -17,7 +17,7 @@
                 <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
             </div>
             <div>
-                <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
+                <a href="/cart.html" class="hover:text-yellow-500"><i class="fas fa-shopping-cart"></i>&nbsp;Cart</a>
             </div>
         </div>
     </nav>
@@ -40,10 +40,21 @@
             <h2 class="text-2xl font-bold mb-4">Products</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                 <!-- Product 1 -->
-                <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 1" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 1</h3>
-                    <p class="text-gray-600">$19.99</p>
+                
+        <a href="product.html?id=product-1" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 1" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 1</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                     <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>
@@ -54,10 +65,21 @@
                     </div>
                 </div>
                 <!-- Product 2 -->
-                <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 2" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 2</h3>
-                    <p class="text-gray-600">$29.99</p>
+                
+        <a href="product.html?id=product-2" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 2" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 2</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                      <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>
@@ -68,10 +90,21 @@
                     </div>
                 </div>
                 <!-- Product 3 -->
-                <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 3" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 3</h3>
-                    <p class="text-gray-600">$39.99</p>
+                
+        <a href="product.html?id=product-3" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 3" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 3</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                     <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>
@@ -82,10 +115,21 @@
                     </div>
                 </div>
                 <!-- Product 4 -->
-                <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 4" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 4</h3>
-                    <p class="text-gray-600">$49.99</p>
+                
+        <a href="product.html?id=product-4" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 4" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 4</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                     <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>
@@ -96,10 +140,21 @@
                     </div>
                 </div>
                 <!-- Product 5 -->
-                 <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 5" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 5</h3>
-                    <p class="text-gray-600">$59.99</p>
+                 
+        <a href="product.html?id=product-5" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 5" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 5</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                     <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>
@@ -110,10 +165,21 @@
                     </div>
                 </div>
                 <!-- Product 6 -->
-                <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 6" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 6</h3>
-                    <p class="text-gray-600">$69.99</p>
+                
+        <a href="product.html?id=product-6" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 6" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 6</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                     <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>
@@ -124,10 +190,21 @@
                     </div>
                 </div>
                 <!-- Product 7 -->
-                <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 7" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 7</h3>
-                    <p class="text-gray-600">$79.99</p>
+                
+        <a href="product.html?id=product-7" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 7" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 7</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                     <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>
@@ -138,10 +215,21 @@
                     </div>
                 </div>
                 <!-- Product 8 -->
-                <div class="product-card">
-                    <img src="https://placehold.co/200x300" alt="Product 8" class="w-full rounded-md">
-                    <h3 class="text-lg font-semibold">Product 8</h3>
-                    <p class="text-gray-600">$89.99</p>
+                
+        <a href="product.html?id=product-8" class="product-card">
+            <img src="https://placehold.co/200x300" alt="Product 8" class="w-full rounded-md">
+            <h3 class="text-lg font-semibold">Product 8</h3>
+            <p class="text-gray-600">$19.99</p>
+            <div class="flex items-center">
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star text-yellow-500"></i>
+                <i class="fas fa-star-half-alt text-yellow-500"></i>
+                <span class="text-gray-600 ml-2">4.5</span>
+            </div>
+        </a>
+        
                     <div class="flex items-center">
                         <i class="fas fa-star text-yellow-500"></i>
                         <i class="fas fa-star text-yellow-500"></i>

product.html

@@ -48,7 +48,7 @@
                     <i class="fas fa-star-half-alt text-yellow-500"></i>
                     <span class="text-gray-600 ml-2">4.5</span>
                 </div>
-                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400" id="addToCartButton">Add to Cart</button>
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400 add-to-cart-button" id="addToCartButton"><i class="fas fa-cart-plus"></i>&nbsp;Add to Cart</button>
             </div>
         </div>
     </main>
@@ -57,10 +57,53 @@
         <p>&copy; 2024 Amazon Clone</p>
     </footer>
 
-    <script src="script.js"></script>
+    <script src="script.js">
+    const urlParams = new URLSearchParams(window.location.search);
+    const productId = urlParams.get("id");
+
+    document.addEventListener('DOMContentLoaded', function() {
+        if (productId) {
+            const product = products.find(p => p.id === productId);
+
+            if (product) {
+                document.getElementById('productName').textContent = product.name;
+                document.getElementById('productDescription').textContent = product.description;
+                document.getElementById('productPrice').textContent = '$' + product.price.toFixed(2);
+                // Assuming you have an image element with id 'productImage'
+                // document.getElementById('productImage').src = product.image;
+                // document.getElementById('productImage').alt = product.name;
+            } else {
+                console.error('Product not found with ID:', productId);
+                document.getElementById('productName').textContent = 'Product Not Found';
+            }
+        } else {
+            console.error('Product ID not provided.');
+            document.getElementById('productName').textContent = 'Product ID Not Provided';
+        }
+
+        const addToCartButton = document.getElementById('addToCartButton');
+        if (addToCartButton) {
+            addToCartButton.addEventListener('click', () => {
+                if (productId) {
+                    const product = products.find(p => p.id === productId);
+                    if (product) {
+                        addToCart(product);
+                    } else {
+                        console.error('Product not found with ID:', productId);
+                    }
+                } else {
+                    console.error('Product ID not provided.');
+                }
+            });
+        }
+    });
+</script>
     <script src="data.js"></script>
 
     <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const productId = urlParams.get("id");
+
         document.addEventListener('DOMContentLoaded', function() {
             const product = products[0];
             trackProductView(product.id);
@@ -69,12 +112,18 @@
 
 
     <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const productId = urlParams.get("id");
+
         document.addEventListener('DOMContentLoaded', function() {
             trackProductView('product123');
         });
     </script>
 
     <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const productId = urlParams.get("id");
+
       const productNameElement = document.getElementById('productName');
       const productDescriptionElement = document.getElementById('productDescription');
       const productPriceElement = document.getElementById('productPrice');

script.js

@@ -41,6 +41,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
         setCartItems(cartItems);
+        console.log("Cart updated:", cartItems);
         updateCartUI();
     }
 
@@ -57,21 +58,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
         setCartItems(cartItems);
-        updateCartUI();
-    }
-
-    function addToCart(product) {
-        let cartItems = getCartItems();
-        const existingItem = cartItems.find(item => item.id === product.id);
-
-        if (existingItem) {
-            existingItem.quantity += 1;
-        } else {
-            product.quantity = 1;
-            cartItems.push(product);
-        }
-
-        setCartItems(cartItems);
+        console.log("Cart updated:", cartItems);
         updateCartUI();
     }
 
@@ -86,6 +73,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 cartItems.splice(itemIndex, 1); // Remove item if quantity is 0 or less
             }
             setCartItems(cartItems);
+        console.log("Cart updated:", cartItems);
             updateCartUI();
         }
         updateCartUI(); // Call updateCartUI to update the order summary
@@ -99,6 +87,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (itemIndex !== -1) {
             cartItems.splice(itemIndex, 1);
             setCartItems(cartItems);
+        console.log("Cart updated:", cartItems);
             updateCartUI();
         }
     }
@@ -151,6 +140,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 removeButton.addEventListener('click', function() {
                     const productId = this.dataset.productId;
                     removeItem(productId);
+        console.log("Item removed:", productId);
                 });
             });
 
@@ -164,6 +154,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     quantity = Math.max(1, quantity - 1); // Ensure quantity is not less than 1
                     quantityInput.value = quantity;
                     updateQuantity(productId, quantity);
+        console.log("Quantity updated:", productId, quantity);
                 });
             });
 
@@ -176,6 +167,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     quantity++;
                     quantityInput.value = quantity;
                     updateQuantity(productId, quantity);
+        console.log("Quantity updated:", productId, quantity);
                 });
             });
         }

style.css

@@ -0,0 +1,5 @@
+
+.add-to-cart-button:hover {
+    transform: scale(1.05);
+    transition: transform 0.2s ease-in-out;
+}