JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<body>
  <div class="container">
    <h1>Checkout</h1>
    <div class="items">
      <div class="item">
        <span>Item 1</span>
        <input type="number" class="quantity-input" id="item1" value="0">
      </div>
      <div class="item">
        <span>Item 2</span>
        <input type="number" class="quantity-input" id="item2" value="0">
      </div>
      <!-- Add more items as needed -->
    </div>
    <button onclick="calculateTotal()">Calculate Total</button>
    <div class="total" id="total"></div>
    <button onclick="submitOrder()">Submit Order</button>
    <div class="confirmation" id="confirmation"></div>
  </div>

  <script src="script.js"></script>
</body>

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
}

.items {
    margin-bottom: 20px;
}

.item {
    margin-bottom: 10px;
}

.quantity-input {
    width: 40px;
}

.total {
    margin-top: 20px;
    font-weight: bold;
}

.confirmation {
    margin-top: 20px;
    font-weight: bold;
}

JavaScript

function calculateTotal() {
    const item1Quantity = parseInt(document.getElementById('item1').value);
    const item2Quantity = parseInt(document.getElementById('item2').value);
    // Add more items if needed

    const total = item1Quantity * 10 + item2Quantity * 15; // Prices per item
    document.getElementById('total').textContent = `Total: $${total}`;
}

function submitOrder() {
    const totalAmount = document.getElementById('total').textContent;
    document.getElementById('confirmation').textContent = `Order submitted! ${totalAmount}`;
}