Untitled

avatar
unknown
plain_text
2 years ago
5.0 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Form</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./index.js"></script>
  </head>
  <body>
    <div class="table-container">
      <table id="product-table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Description</th>
            <th>Quantity/Update</th>
            <th>Price</th>
            <th>Discount</th>
            <th>Tax</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><img src="product1.jpg" alt="Product 1" /></td>
            <td>Description 1</td>
            <td>
              <input type="number" class="quantity" value="3" />
              <button class="minus">-</button>
              <button class="plus">+</button>
            </td>
            <td class="price">10.00</td>
            <td><input type="number" class="discount" value="2" /></td>
            <td><input type="number" class="tax" value="1" /></td>
            <td class="total">27.00</td>
          </tr>
          <tr>
            <td><img src="product2.jpg" alt="Product 2" /></td>
            <td>Description 2</td>
            <td>
              <input type="number" class="quantity" value="2" />
              <button class="minus">-</button>
              <button class="plus">+</button>
            </td>
            <td class="price">15.00</td>
            <td><input type="number" class="discount" value="1" /></td>
            <td><input type="number" class="tax" value="0.5" /></td>
            <td class="total">29.50</td>
          </tr>
          <tr>
            <td><img src="product3.jpg" alt="Product 3" /></td>
            <td>Description 3</td>
            <td>
              <input type="number" class="quantity" value="5" />
              <button class="minus">-</button>
              <button class="plus">+</button>
            </td>
            <td class="price">20.00</td>
            <td><input type="number" class="discount" value="3" /></td>
            <td><input type="number" class="tax" value="1.5" /></td>
            <td class="total">97.50</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3"></td>
            <td id="total-price">45.00</td>
            <td id="total-discount">6.00</td>
            <td id="total-tax">3.00</td>
            <td id="grand-total">42.00</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </body>
</html>


$(document).ready(function() {
  const products = $("#product-table tbody tr");
  const totalPriceCell = $("#total-price");
  const totalDiscountCell = $("#total-discount");
  const totalTaxCell = $("#total-tax");
  const grandTotalCell = $("#grand-total");

  function updateRowTotal(row) {
    const quantity = parseFloat(row.find(".quantity").val());
    const price = parseFloat(row.find(".price").text());
    const discount = parseFloat(row.find(".discount").val());
    const tax = Math.ceil(quantity * price * 0.125);

    const total = (quantity * price - discount - tax).toFixed(2);
    row.find(".total").text(total);
    row.find(".tax").val(tax);

    updateTotals();
  }

  function updateTotals() {
    let total = 0;
    let totalDiscount = 0;
    let totalTax = 0;

    products.each(function() {
      const product = $(this);
      total += parseFloat(product.find(".total").text());
      totalDiscount += parseFloat(product.find(".discount").val());
      totalTax += parseFloat(product.find(".tax").val());
    });

    totalPriceCell.text(total.toFixed(2));
    totalDiscountCell.text(totalDiscount.toFixed(2));
    totalTaxCell.text(totalTax.toFixed(2));
    grandTotalCell.text((total - totalDiscount + totalTax).toFixed(2));
  }

  products.each(function() {
    const product = $(this);
    const minusButton = product.find(".minus");
    const plusButton = product.find(".plus");
    const quantityInput = product.find(".quantity");
    const discountInput = product.find(".discount");
    const taxInput = product.find(".tax");

    minusButton.click(function() {
      if (quantityInput.val() > 1) {
        quantityInput.val(parseInt(quantityInput.val()) - 1);
        updateRowTotal(product);
      }
    });

    plusButton.click(function() {
      quantityInput.val(parseInt(quantityInput.val()) + 1);
      updateRowTotal(product);
    });

    quantityInput.change(function() {
      updateRowTotal(product);
    });

    discountInput.change(function() {
      updateRowTotal(product);
    });

    taxInput.change(function() {
      updateRowTotal(product);
    });

    updateRowTotal(product);
  });
});
Editor is loading...