Spaces:

KingNish
/

test-space

Running

App Files Files Community

Implemented image replacement, dynamic product page, cart functionality, checkout, confirmation, and product tracking.

#24

by smolSWE - opened 25 days ago

base: refs/heads/main

←

from: refs/pr/24

Discussion Files changed

+235

-270

Files changed (6) hide show

cart.html +1 -0
checkout.html +23 -2
confirmation.html +24 -2
data.js +24 -0
product.html +46 -6
script.js +117 -260

cart.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>

 <!DOCTYPE html>
 <html lang="en">
 <head>

checkout.html CHANGED Viewed

@@ -36,8 +36,29 @@
                         <input type="text" id="address" name="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <div class="mb-4">
-                        <label for="payment" class="block text-gray-700 text-sm font-bold mb-2">Payment Information:</label>
-                        <input type="text" id="payment" name="payment" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <button type="submit" class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
                 </form>

                         <input type="text" id="address" name="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <div class="mb-4">
+                        <label for="city" class="block text-gray-700 text-sm font-bold mb-2">City:</label>
+                        <input type="text" id="city" name="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                    <div class="mb-4">
+                        <label for="state" class="block text-gray-700 text-sm font-bold mb-2">State:</label>
+                        <input type="text" id="state" name="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                    <div class="mb-4">
+                        <label for="zip" class="block text-gray-700 text-sm font-bold mb-2">Zip Code:</label>
+                        <input type="text" id="zip" name="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                    <h2 class="text-xl font-bold mb-2">Payment Information</h2>
+                    <div class="mb-4">
+                        <label for="credit_card" class="block text-gray-700 text-sm font-bold mb-2">Credit Card Number:</label>
+                        <input type="text" id="credit_card" name="credit_card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                    <div class="mb-4">
+                        <label for="expiration_date" class="block text-gray-700 text-sm font-bold mb-2">Expiration Date:</label>
+                        <input type="text" id="expiration_date" name="expiration_date" placeholder="MM/YY" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                    <div class="mb-4">
+                        <label for="cvv" class="block text-gray-700 text-sm font-bold mb-2">CVV:</label>
+                        <input type="text" id="cvv" name="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <button type="submit" class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
                 </form>

confirmation.html CHANGED Viewed

@@ -23,8 +23,30 @@
     <main class="container mx-auto mt-8">
         <h1 class="text-2xl font-bold mb-4">Order Confirmation</h1>
-        <p>Thank you for your order!</p>
-        <p>Your order ID is: <span id="order-id"></span></p>
     </main>
     <footer class="bg-gray-800 p-4 text-white text-center mt-8">

     <main class="container mx-auto mt-8">
         <h1 class="text-2xl font-bold mb-4">Order Confirmation</h1>
+        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <h2 class="text-xl font-bold mb-4">Thank you for your order!</h2>
+            <div class="mb-4">
+                <h3 class="text-lg font-bold mb-2">Shipping Address:</h3>
+                <p>Name: <span id="shipping-name"></span></p>
+                <p>Address: <span id="shipping-address"></span></p>
+                <p>City: <span id="shipping-city"></span></p>
+                <p>State: <span id="shipping-state"></span></p>
+                <p>Zip Code: <span id="shipping-zip"></span></p>
+            </div>
+            <div class="mb-4">
+                <h3 class="text-lg font-bold mb-2">Payment Information:</h3>
+                <p>Credit Card: <span id="payment-credit-card">XXXX-XXXX-XXXX-1234</span></p>
+                <p>Expiration Date: <span id="payment-expiration-date">12/24</span></p>
+                <p>CVV: <span id="payment-cvv">123</span></p>
+            </div>
+            <div>
+                <h3 class="text-lg font-bold mb-2">Order Details:</h3>
+                <ul id="order-items">
+                    <!-- Order items will be dynamically added here -->
+                </ul>
+                <p class="font-bold">Total: <span id="order-total">$0.00</span></p>
+            </div>
+        </div>
     </main>
     <footer class="bg-gray-800 p-4 text-white text-center mt-8">

data.js ADDED Viewed

	@@ -0,0 +1,24 @@

+const products = [
+  {
+    id: "1",
+    name: "Product 1",
+    description: "This is the first product.",
+    price: 25.00,
+    image: "https://placehold.co/600x400/png"
+  },
+  {
+    id: "2",
+    name: "Product 2",
+    description: "This is the second product.",
+    price: 50.00,
+    image: "https://placehold.co/600x400/png"
+  },
+  {
+    id: "3",
+    name: "Product 3",
+    description: "This is the third product.",
+    price: 75.00,
+    image: "https://placehold.co/600x400/png"
+  }
+];

product.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -36,9 +37,9 @@
                 </div>
             </div>
             <div>
-                <h1 class="text-2xl font-bold">Product Title</h1>
-                <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                <p class="text-xl font-semibold">$99.99</p>
                 <div class="flex items-center mb-4">
                     <i class="fas fa-star text-yellow-500"></i>
                     <i class="fas fa-star text-yellow-500"></i>
@@ -47,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">Add to Cart</button>
             </div>
         </div>
     </main>
@@ -57,5 +58,44 @@
     </footer>
     <script src="script.js"></script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
                 </div>
             </div>
             <div>
+                <h1 class="text-2xl font-bold" id="productName">Product Title</h1>
+                <p class="text-gray-600" id="productDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p class="text-xl font-semibold" id="productPrice">$99.99</p>
                 <div class="flex items-center mb-4">
                     <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>
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400" id="addToCartButton">Add to Cart</button>
             </div>
         </div>
     </main>
     </footer>
     <script src="script.js"></script>
+    <script src="data.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const product = products[0];
+            trackProductView(product.id);
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            trackProductView('product123');
+        });
+    </script>
+    <script>
+      const productNameElement = document.getElementById('productName');
+      const productDescriptionElement = document.getElementById('productDescription');
+      const productPriceElement = document.getElementById('productPrice');
+      const productImageElement = document.getElementById('productImage');
+      const addToCartButton = document.getElementById('addToCartButton');
+      if (products && products.length > 0) {
+        const product = products[0];
+        if (productNameElement) productNameElement.textContent = product.name;
+        if (productDescriptionElement) productDescriptionElement.textContent = product.description;
+        if (productPriceElement) productPriceElement.textContent = '$' + product.price.toFixed(2);
+        if (productImageElement) productImageElement.src = product.image;
+        if (productImageElement) productImageElement.alt = product.name;
+      } else {
+        console.error('No products found in data.js');
+      }
+      addToCartButton.addEventListener('click', () => {
+        addToCart(products[0]);
+      });
+    </script>
+  </body>
+</html>

script.js CHANGED Viewed

@@ -1,4 +1,18 @@
 document.addEventListener('DOMContentLoaded', function() {
     // Function to get cart items from local storage
     function getCartItems() {
@@ -11,229 +25,50 @@ document.addEventListener('DOMContentLoaded', function() {
         localStorage.setItem('cart', JSON.stringify(cartItems));
     }
     // Function to add an item to the cart
-    function addToCart(productId, quantity) {
-        const cartItems = getCartItems();
-        const existingItem = cartItems.find(item => item.productId === productId);
         if (existingItem) {
-            existingItem.quantity += quantity;
         } else {
-            cartItems.push({ productId, quantity });
         }
         setCartItems(cartItems);
         updateCartUI();
     }
-    // Function to update item quantity in the cart
-    function updateQuantity(productId, quantity) {
-        const cartItems = getCartItems();
-        const itemIndex = cartItems.findIndex(item => item.productId === productId);
-        if (itemIndex !== -1) {
-            cartItems[itemIndex].quantity = quantity;
-            if (cartItems[itemIndex].quantity <= 0) {
-                cartItems.splice(itemIndex, 1); // Remove item if quantity is 0 or less
-            }
-            setCartItems(cartItems);
-            updateCartUI();
-        }
-    }
-    // Function to remove an item from the cart
-    function removeItem(productId) {
-        const cartItems = getCartItems();
-        const itemIndex = cartItems.findIndex(item => item.productId === productId);
-        if (itemIndex !== -1) {
-            cartItems.splice(itemIndex, 1);
-            setCartItems(cartItems);
-            updateCartUI();
-        }
-    }
-    // Function to calculate cart totals
-    function calculateTotals() {
-        const cartItems = getCartItems();
-        let subtotal = 0;
-        // Dummy product prices (replace with actual product data)
-        const productPrices = {
-            "1": 20.00,
-            "2": 30.00,
-            "3": 40.00
-        };
-        cartItems.forEach(item => {
-            const productId = item.productId;
-            const quantity = item.quantity;
-            const price = productPrices[productId] || 0; // Get price from productPrices, default to 0
-            subtotal += price * quantity;
-        });
-        const shipping = 5.00;
-        const total = subtotal + shipping;
-        return { subtotal, shipping, total };
-    }
-    // Function to display cart items in cart.html
-    function displayCartItems() {
-        const cartItems = getCartItems();
-        const cartItemsContainer = document.getElementById('cart-items');
-        if (cartItemsContainer) {
-            cartItemsContainer.innerHTML = ''; // Clear existing items
-            cartItems.forEach(item => {
-                // Dummy product data (replace with actual product data)
-                const productId = item.productId;
-                const product = {
-                    id: productId,
-                    title: `Product ${productId}`,
-                    price: 20.00,
-                    image: `https://via.placeholder.com/100`
-                };
-                const cartItemDiv = document.createElement('div');
-                cartItemDiv.classList.add('flex', 'items-center', 'border', 'border-gray-300', 'rounded-md', 'p-4');
-                cartItemDiv.innerHTML = `
-                    <img src="${product.image}" alt="Product Image" class="w-24 h-24 mr-4">
-                    <div>
-                        <h2 class="text-lg font-bold">${product.title}</h2>
-                        <p class="text-gray-600">$${product.price.toFixed(2)}</p>
-                        <div class="flex items-center mt-2">
-                            <button class="bg-gray-200 px-2 py-1 rounded-md decrease-quantity" data-product-id="${product.id}">-</button>
-                            <input type="number" value="${item.quantity}" class="w-16 text-center border border-gray-300 rounded-md mx-2 quantity-input" data-product-id="${product.id}">
-                            <button class="bg-gray-200 px-2 py-1 rounded-md increase-quantity" data-product-id="${product.id}">+</button>
-                            <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-product-id="${product.id}">Remove</button>
-                        </div>
-                    </div>
-                `;
-                cartItemsContainer.appendChild(cartItemDiv);
-            });
-            // Add event listeners to quantity buttons and remove buttons
-            const decreaseButtons = document.querySelectorAll('.decrease-quantity');
-            decreaseButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    const productId = this.dataset.productId;
-                    const quantityInput = this.parentNode.querySelector('.quantity-input');
-                    let quantity = parseInt(quantityInput.value);
-                    quantity = Math.max(1, quantity - 1); // Ensure quantity is not less than 1
-                    quantityInput.value = quantity;
-                    updateQuantity(productId, quantity);
-                });
-            });
-            const increaseButtons = document.querySelectorAll('.increase-quantity');
-            increaseButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    const productId = this.dataset.productId;
-                    const quantityInput = this.parentNode.querySelector('.quantity-input');
-                    let quantity = parseInt(quantityInput.value);
-                    quantity++;
-                    quantityInput.value = quantity;
-                    updateQuantity(productId, quantity);
-                });
-            });
-            const removeButtons = document.querySelectorAll('.remove-item');
-            removeButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    const productId = this.dataset.productId;
-                    removeItem(productId);
-                });
-            });
-        }
-    }
-    // Function to update the order summary in cart.html and checkout.html
-    function updateOrderSummary() {
-        const { subtotal, shipping, total } = calculateTotals();
-        const subtotalElements = document.querySelectorAll('#subtotal');
-        subtotalElements.forEach(element => element.textContent = `$${subtotal.toFixed(2)}`);
-        const shippingElements = document.querySelectorAll('#shipping');
-        shippingElements.forEach(element => element.textContent = `$${shipping.toFixed(2)}`);
-        const totalElements = document.querySelectorAll('#total');
-        totalElements.forEach(element => element.textContent = `$${total.toFixed(2)}`);
-    }
-    // Function to handle checkout
-    function handleCheckout() {
-        const checkoutForm = document.getElementById('checkout-form');
-        if (checkoutForm) {
-            checkoutForm.addEventListener('submit', function(event) {
-                event.preventDefault(); // Prevent form submission
-                // Simulate order processing
-                const orderId = Math.floor(Math.random() * 1000000);
-                // Store order ID in local storage
-                localStorage.setItem('orderId', orderId);
-                // Clear the cart
-                setCartItems([]);
-                // Redirect to confirmation page
-                window.location.href = '/confirmation.html';
-            });
-        }
-    }
-    // Function to display order confirmation details
-    function displayOrderConfirmation() {
-        const orderId = localStorage.getItem('orderId');
-        const orderIdElement = document.getElementById('order-id');
-        if (orderIdElement) {
-            orderIdElement.textContent = orderId;
         }
-    }
-    // Initialize the cart page
-    if (window.location.pathname === '/cart.html') {
-        displayCartItems();
-        updateOrderSummary();
-    }
-    // Initialize the checkout page
-    if (window.location.pathname === '/checkout.html') {
-        updateOrderSummary();
-        handleCheckout();
-    }
-    // Initialize the confirmation page
-    if (window.location.pathname === '/confirmation.html') {
-        displayOrderConfirmation();
-    }
-});
-    // Function to get cart items from local storage
-    function getCartItems() {
-        const cartItems = localStorage.getItem('cart');
-        return cartItems ? JSON.parse(cartItems) : [];
-    }
-    // Function to set cart items in local storage
-    function setCartItems(cartItems) {
-        localStorage.setItem('cart', JSON.stringify(cartItems));
     }
-    // Function to add an item to the cart
-    function addToCart(productId, quantity) {
-        const cartItems = getCartItems();
-        const existingItem = cartItems.find(item => item.productId === productId);
         if (existingItem) {
-            existingItem.quantity += quantity;
         } else {
-            cartItems.push({ productId, quantity });
         }
         setCartItems(cartItems);
@@ -242,8 +77,8 @@ document.addEventListener('DOMContentLoaded', function() {
     // Function to update item quantity in the cart
     function updateQuantity(productId, quantity) {
-        const cartItems = getCartItems();
-        const itemIndex = cartItems.findIndex(item => item.productId === productId);
         if (itemIndex !== -1) {
             cartItems[itemIndex].quantity = quantity;
@@ -253,12 +88,13 @@ document.addEventListener('DOMContentLoaded', function() {
             setCartItems(cartItems);
             updateCartUI();
         }
     }
     // Function to remove an item from the cart
     function removeItem(productId) {
-        const cartItems = getCartItems();
-        const itemIndex = cartItems.findIndex(item => item.productId === productId);
         if (itemIndex !== -1) {
             cartItems.splice(itemIndex, 1);
@@ -269,21 +105,11 @@ document.addEventListener('DOMContentLoaded', function() {
     // Function to calculate cart totals
     function calculateTotals() {
-        const cartItems = getCartItems();
         let subtotal = 0;
-        // Dummy product prices (replace with actual product data)
-        const productPrices = {
-            "1": 20.00,
-            "2": 30.00,
-            "3": 40.00
-        };
         cartItems.forEach(item => {
-            const productId = item.productId;
-            const quantity = item.quantity;
-            const price = productPrices[productId] || 0; // Get price from productPrices, default to 0
-            subtotal += price * quantity;
         });
         const shipping = 5.00;
@@ -294,39 +120,38 @@ document.addEventListener('DOMContentLoaded', function() {
     // Function to display cart items in cart.html
     function displayCartItems() {
-        const cartItems = getCartItems();
         const cartItemsContainer = document.getElementById('cart-items');
         if (cartItemsContainer) {
             cartItemsContainer.innerHTML = ''; // Clear existing items
             cartItems.forEach(item => {
-                // Dummy product data (replace with actual product data)
-                const productId = item.productId;
-                const product = {
-                    id: productId,
-                    title: `Product ${productId}`,
-                    price: 20.00,
-                    image: `https://via.placeholder.com/100`
-                };
                 const cartItemDiv = document.createElement('div');
                 cartItemDiv.classList.add('flex', 'items-center', 'border', 'border-gray-300', 'rounded-md', 'p-4');
                 cartItemDiv.innerHTML = `
-                    <img src="${product.image}" alt="Product Image" class="w-24 h-24 mr-4">
                     <div>
-                        <h2 class="text-lg font-bold">${product.title}</h2>
-                        <p class="text-gray-600">$${product.price.toFixed(2)}</p>
                         <div class="flex items-center mt-2">
-                            <button class="bg-gray-200 px-2 py-1 rounded-md decrease-quantity" data-product-id="${product.id}">-</button>
-                            <input type="number" value="${item.quantity}" class="w-16 text-center border border-gray-300 rounded-md mx-2 quantity-input" data-product-id="${product.id}">
-                            <button class="bg-gray-200 px-2 py-1 rounded-md increase-quantity" data-product-id="${product.id}">+</button>
-                            <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-product-id="${product.id}">Remove</button>
                         </div>
                     </div>
                 `;
                 cartItemsContainer.appendChild(cartItemDiv);
             });
             // Add event listeners to quantity buttons and remove buttons
@@ -353,14 +178,6 @@ document.addEventListener('DOMContentLoaded', function() {
                     updateQuantity(productId, quantity);
                 });
             });
-            const removeButtons = document.querySelectorAll('.remove-item');
-            removeButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    const productId = this.dataset.productId;
-                    removeItem(productId);
-                });
-            });
         }
     }
@@ -385,14 +202,21 @@ document.addEventListener('DOMContentLoaded', function() {
             checkoutForm.addEventListener('submit', function(event) {
                 event.preventDefault(); // Prevent form submission
-                // Simulate order processing
-                const orderId = Math.floor(Math.random() * 1000000);
-                // Store order ID in local storage
-                localStorage.setItem('orderId', orderId);
-                // Clear the cart
-                setCartItems([]);
                 // Redirect to confirmation page
                 window.location.href = '/confirmation.html';
@@ -401,16 +225,42 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     // Function to display order confirmation details
-    function displayOrderConfirmation() {
-        const orderId = localStorage.getItem('orderId');
-        const orderIdElement = document.getElementById('order-id');
-        if (orderIdElement) {
-            orderIdElement.textContent = orderId;
         }
     }
-document.addEventListener('DOMContentLoaded', function() {
     // Initialize the cart page
     if (window.location.pathname === '/cart.html') {
         displayCartItems();
@@ -425,6 +275,13 @@ document.addEventListener('DOMContentLoaded', function() {
     // Initialize the confirmation page
     if (window.location.pathname === '/confirmation.html') {
-        displayOrderConfirmation();
     }
 });

+    // Track product views
+    function trackProductView(productId) {
+        let viewCounts = JSON.parse(localStorage.getItem('viewCounts') || '{}');
+        viewCounts[productId] = (viewCounts[productId] || 0) + 1;
+        localStorage.setItem('viewCounts', JSON.stringify(viewCounts));
+    }
+    // Track add to cart events
+    function trackAddToCart(productId) {
+        let addToCartCounts = JSON.parse(localStorage.getItem('addToCartCounts') || '{}');
+        addToCartCounts[productId] = (addToCartCounts[productId] || 0) + 1;
+        localStorage.setItem('addToCartCounts', JSON.stringify(addToCartCounts));
+    }
 document.addEventListener('DOMContentLoaded', function() {
     // Function to get cart items from local storage
     function getCartItems() {
         localStorage.setItem('cart', JSON.stringify(cartItems));
     }
     // Function to add an item to the cart
+    function addToCart(product) {
+        trackAddToCart(product.id); // Track add to cart event
+        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);
         updateCartUI();
     }
+    function addToCart(product) {
+        trackAddToCart('product123'); // Track add to cart event
+        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);
+        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);
     // Function to update item quantity in the cart
     function updateQuantity(productId, quantity) {
+        let cartItems = getCartItems();
+        const itemIndex = cartItems.findIndex(item => item.id === productId);
         if (itemIndex !== -1) {
             cartItems[itemIndex].quantity = quantity;
             setCartItems(cartItems);
             updateCartUI();
         }
+        updateCartUI(); // Call updateCartUI to update the order summary
     }
     // Function to remove an item from the cart
     function removeItem(productId) {
+        let cartItems = getCartItems();
+        const itemIndex = cartItems.findIndex(item => item.id === productId);
         if (itemIndex !== -1) {
             cartItems.splice(itemIndex, 1);
     // Function to calculate cart totals
     function calculateTotals() {
+        let cartItems = getCartItems();
         let subtotal = 0;
         cartItems.forEach(item => {
+            subtotal += item.price * item.quantity;
         });
         const shipping = 5.00;
     // Function to display cart items in cart.html
     function displayCartItems() {
+        let cartItems = getCartItems();
         const cartItemsContainer = document.getElementById('cart-items');
         if (cartItemsContainer) {
             cartItemsContainer.innerHTML = ''; // Clear existing items
             cartItems.forEach(item => {
                 const cartItemDiv = document.createElement('div');
                 cartItemDiv.classList.add('flex', 'items-center', 'border', 'border-gray-300', 'rounded-md', 'p-4');
                 cartItemDiv.innerHTML = `
+                    <img src="${item.image}" alt="Product Image" class="w-24 h-24 mr-4">
                     <div>
+                        <h2 class="text-lg font-bold">${item.name}</h2>
+                        <p class="text-gray-600">$${item.price.toFixed(2)}</p>
                         <div class="flex items-center mt-2">
+                            <button class="bg-gray-200 px-2 py-1 rounded-md decrease-quantity" data-product-id="${item.id}">-</button>
+                            <input type="number" value="${item.quantity}" class="w-16 text-center border border-gray-300 rounded-md mx-2 quantity-input" data-product-id="${item.id}">
+                            <button class="bg-gray-200 px-2 py-1 rounded-md increase-quantity" data-product-id="${item.id}">+</button>
+                            <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-product-id="${item.id}">Remove</button>
                         </div>
                     </div>
                 `;
                 cartItemsContainer.appendChild(cartItemDiv);
+                // Add event listener to remove button
+                const removeButton = cartItemDiv.querySelector('.remove-item');
+                removeButton.addEventListener('click', function() {
+                    const productId = this.dataset.productId;
+                    removeItem(productId);
+                });
             });
             // Add event listeners to quantity buttons and remove buttons
                     updateQuantity(productId, quantity);
                 });
             });
         }
     }
             checkoutForm.addEventListener('submit', function(event) {
                 event.preventDefault(); // Prevent form submission
+                // Get form data
+                const name = document.getElementById('name').value;
+                const address = document.getElementById('address').value;
+                const city = document.getElementById('city').value;
+                const state = document.getElementById('state').value;
+                const zip = document.getElementById('zip').value;
+                const credit_card = document.getElementById('credit_card').value;
+                const expiration_date = document.getElementById('expiration_date').value;
+                const cvv = document.getElementById('cvv').value;
+                // Store form data in local storage
+                const shippingInfo = { name, address, city, state, zip };
+                const paymentInfo = { credit_card, expiration_date, cvv };
+                localStorage.setItem('shippingInfo', JSON.stringify(shippingInfo));
+                localStorage.setItem('paymentInfo', JSON.stringify(paymentInfo));
                 // Redirect to confirmation page
                 window.location.href = '/confirmation.html';
     }
     // Function to display order confirmation details
+    function displayConfirmationDetails() {
+        const shippingInfo = localStorage.getItem('shippingInfo');
+        const paymentInfo = localStorage.getItem('paymentInfo');
+        const cartItems = getCartItems();
+        if (shippingInfo && paymentInfo && cartItems) {
+            const shipping = JSON.parse(shippingInfo);
+            const payment = JSON.parse(paymentInfo);
+            document.getElementById('shipping-name').textContent = shipping.name;
+            document.getElementById('shipping-address').textContent = shipping.address;
+            document.getElementById('shipping-city').textContent = shipping.city;
+            document.getElementById('shipping-state').textContent = shipping.state;
+            document.getElementById('shipping-zip').textContent = shipping.zip;
+            // Payment information is dummy data in confirmation.html
+            const orderItemsList = document.getElementById('order-items');
+            let orderTotal = 0;
+            cartItems.forEach(item => {
+                const listItem = document.createElement('li');
+                listItem.textContent = `${item.name} (${item.quantity}) - $${(item.price * item.quantity).toFixed(2)}`;
+                orderItemsList.appendChild(listItem);
+                orderTotal += item.price * item.quantity;
+            });
+            document.getElementById('order-total').textContent = `$${orderTotal.toFixed(2)}`;
+            // Clear cart and shipping info from local storage
+            localStorage.removeItem('cart');
+            localStorage.removeItem('shippingInfo');
+            localStorage.removeItem('paymentInfo');
         }
     }
     // Initialize the cart page
     if (window.location.pathname === '/cart.html') {
         displayCartItems();
     // Initialize the confirmation page
     if (window.location.pathname === '/confirmation.html') {
+        displayConfirmationDetails();
     }
 });
+function updateCartUI() {
+    if (window.location.pathname === '/cart.html') {
+        displayCartItems();
+        updateOrderSummary();
+    }
+}