Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bill</title>
</head>
<body>
    <h1>Bill</h1>

    <div id="customerDetails">
        <!-- Customer details will be displayed here -->
    </div>

    <div id="selectedItems">
        <!-- Selected items will be displayed here -->
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Retrieve customer details from localStorage
            var customerData = JSON.parse(localStorage.getItem('customerData'));

            // Display customer details if available
            if (customerData) {
                var customerDetailsHTML = '<h2>Customer Details</h2>' +
                    '<p>Name: ' + customerData.customerName + '</p>' +
                    '<p>Mobile: ' + customerData.customerMobile + '</p>' +
                    '<p>Table: ' + customerData.customerTable + '</p>';
                document.getElementById('customerDetails').innerHTML = customerDetailsHTML;
            } else {
                // Handle case where customer details are not available
                console.log("Customer details not found.");
            }

            // Retrieve and display selected items for each category
            var selectedItemsHTML = '<h2>Selected Items</h2>';
            // Add code here to retrieve and display selected items for each category

            document.getElementById('selectedItems').innerHTML = selectedItemsHTML;
        });

        function confirmOrder(category) {
            // Get the selected items from the respective popup
            var selectedItems = [];
            var itemList = document.querySelectorAll('.' + category + '-popup-container input[type="number"]');
            itemList.forEach(function(item) {
                var itemName = item.parentElement.querySelector('span').textContent;
                var itemQuantity = item.value;
                if (itemQuantity > 0) {
                    selectedItems.push({ name: itemName, quantity: itemQuantity });
                }
            });

            // Get customer details
            var customerName = document.getElementById('name').value;
            var customerMobile = document.getElementById('mobile').value;
            var customerTable = document.getElementById('table').value;

            // Combine customer details with selected items
            var orderData = {
                customerName: customerName,
                customerMobile: customerMobile,
                customerTable: customerTable,
                selectedItems: selectedItems
            };

            // Store the combined data in localStorage
            localStorage.setItem('customerData', JSON.stringify(orderData)); // Store customer details

            // Optionally, you can also display a confirmation message
            alert('Order confirmed for ' + category + '. Thank you!');
        }

        function redirectToBill() {
            window.location.href = "bill.html";
        }
    </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter