Untitled

<!DOCTYPE html>
<html>
<head>
  <title>My Ecommerce App - Cart</title>
  <!-- Add the Bootstrap CSS link -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">My Ecommerce App</a>
      <!-- Add your navigation links here, if needed -->
    </nav>
  </header>

  <div class="container mt-4">
    <h2>Shopping Cart</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Product</th>
          <th scope="col">Price</th>
          <th scope="col">Quantity</th>
          <th scope="col">Subtotal</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Product 1</td>
          <td>$100</td>
          <td>
            <input type="number" class="form-control quantity-input" value="1" min="1">
          </td>
          <td>$100</td>
          <td>
            <button type="button" class="btn btn-danger btn-sm delete-product">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Product 2</td>
          <td>$50</td>
          <td>
            <input type="number" class="form-control quantity-input" value="1" min="1">
          </td>
          <td>$50</td>
          <td>
            <button type="button" class="btn btn-danger btn-sm delete-product">Remove</button>
          </td>
        </tr>
        <!-- Add more products here as needed -->
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3"></td>
          <th>Total:</th>
          <td id="totalPrice">$150</td>
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- Add the Bootstrap JS and jQuery links -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {
      // Update the subtotal and total price when the quantity changes
      $(".quantity-input").on("change", function() {
        const quantity = parseInt($(this).val());
        const price = parseFloat($(this).closest("tr").find("td:nth-child(2)").text().replace("$", ""));
        const subtotal = quantity * price;
        $(this).closest("tr").find("td:nth-child(4)").text("$" + subtotal.toFixed(2));
        updateTotalPrice();
      });

      // Remove the product from the cart
      $(".delete-product").on("click", function() {
        $(this).closest("tr").remove();
        updateTotalPrice();
      });

      // Function to update the total price
      function updateTotalPrice() {
        let totalPrice = 0;
        $(".quantity-input").each(function() {
          const quantity = parseInt($(this).val());
          const price = parseFloat($(this).closest("tr").find("td:nth-child(2)").text().replace("$", ""));
          const subtotal = quantity * price;
          totalPrice += subtotal;
        });
        $("#totalPrice").text("$" + totalPrice.toFixed(2));
      }
    });
  </script>
</body>
</html>