Spaces:

KingNish
/

test-space

Running

App Files Files Community

smolSWE commited on May 19

Commit

c336ed9

verified ·

1 Parent(s): 19a1ee1

Implement cart, checkout, and confirmation pages

Browse files

Implemented cart functionality, checkout form, and order confirmation. Updated script.js with necessary functions and event listeners.

Files changed (4) hide show

cart.html +9 -20
checkout.html +13 -13
confirmation.html +3 -4
script.js +430 -0

cart.html CHANGED Viewed

@@ -6,6 +6,7 @@
     <title>Shopping Cart - Amazon Clone</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <nav class="bg-gray-800 p-4 text-white">
@@ -22,29 +23,17 @@
     </nav>
     <main class="container mx-auto mt-8">
-        <h1>Shopping Cart</h1>
-        <div class="grid grid-cols-1 gap-4">
-            <div class="flex items-center border border-gray-300 rounded-md p-4">
-                <img src="https://via.placeholder.com/100" 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">$99.99</p>
-                    <div class="flex items-center mt-2">
-                        <button class="bg-gray-200 px-2 py-1 rounded-md">-</button>
-                        <input type="number" value="1" class="w-16 text-center border border-gray-300 rounded-md mx-2">
-                        <button class="bg-gray-200 px-2 py-1 rounded-md">+</button>
-                        <button class="text-red-500 hover:text-red-700 ml-4">Remove</button>
-                    </div>
-                </div>
-            </div>
         </div>
         <div class="mt-8">
             <h2 class="text-xl font-bold">Order Summary</h2>
-            <p>Subtotal: $99.99</p>
-            <p>Shipping: $5.00</p>
-            <p class="font-bold">Total: $104.99</p>
-            <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Proceed to Checkout</button>
         </div>
     </main>
@@ -54,4 +43,4 @@
     <script src="script.js"></script>
 </body>
-</html>

     <title>Shopping Cart - Amazon Clone</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
     <nav class="bg-gray-800 p-4 text-white">
     </nav>
     <main class="container mx-auto mt-8">
+        <h1 class="text-2xl font-bold mb-4">Shopping Cart</h1>
+        <div id="cart-items" class="grid grid-cols-1 gap-4">
+            <!-- Cart items will be dynamically added here -->
         </div>
         <div class="mt-8">
             <h2 class="text-xl font-bold">Order Summary</h2>
+            <p>Subtotal: <span id="subtotal">$0.00</span></p>
+            <p>Shipping: <span id="shipping">$5.00</span></p>
+            <p class="font-bold">Total: <span id="total">$0.00</span></p>
+            <a href="/checkout.html" class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400 inline-block">Proceed to Checkout</a>
         </div>
     </main>
     <script src="script.js"></script>
 </body>
+</html>

checkout.html CHANGED Viewed

@@ -22,31 +22,31 @@
     </nav>
     <main class="container mx-auto mt-8">
-        <h1>Checkout</h1>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-                <h2 class="text-xl font-bold">Shipping Information</h2>
-                <form>
                     <div class="mb-4">
                         <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
-                        <input type="text" id="name" 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="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
-                        <input type="text" id="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" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                 </form>
             </div>
             <div>
-                <h2 class="text-xl font-bold">Order Summary</h2>
-                <p>Subtotal: $99.99</p>
-                <p>Shipping: $5.00</p>
-                <p class="font-bold">Total: $104.99</p>
-                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
             </div>
         </div>
     </main>
@@ -57,4 +57,4 @@
     <script src="script.js"></script>
 </body>
-</html>

     </nav>
     <main class="container mx-auto mt-8">
+        <h1 class="text-2xl font-bold mb-4">Checkout</h1>
+        <div class="grid grid-cols-2 gap-8">
             <div>
+                <h2 class="text-xl font-bold mb-2">Shipping Information</h2>
+                <form id="checkout-form">
                     <div class="mb-4">
                         <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
+                        <input type="text" id="name" name="name" 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="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
+                        <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>
             </div>
             <div>
+                <h2 class="text-xl font-bold mb-2">Order Summary</h2>
+                <p>Subtotal: <span id="subtotal">$0.00</span></p>
+                <p>Shipping: <span id="shipping">$5.00</span></p>
+                <p class="font-bold">Total: <span id="total">$0.00</span></p>
             </div>
         </div>
     </main>
     <script src="script.js"></script>
 </body>
+</html>

confirmation.html CHANGED Viewed

@@ -22,10 +22,9 @@
     </nav>
     <main class="container mx-auto mt-8">
-        <h1>Order Confirmation</h1>
         <p>Thank you for your order!</p>
-        <p>Your order has been placed and will be shipped soon.</p>
-        <p>Order ID: #1234567890</p>
     </main>
     <footer class="bg-gray-800 p-4 text-white text-center mt-8">
@@ -34,4 +33,4 @@
     <script src="script.js"></script>
 </body>
-</html>

     </nav>
     <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">
     <script src="script.js"></script>
 </body>
+</html>

script.js CHANGED Viewed

	@@ -0,0 +1,430 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // 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);
+        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);
+        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;
+        }
+    }
+document.addEventListener('DOMContentLoaded', function() {
+    // 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();
+    }
+});