Untitled

unknown
html
2 months ago
6.5 kB
Indexable
Never
<!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" />
  </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>
    <script src="./index.js"></script>
  </body>
</html>



/* Reset some default styling */
body,
h1,
h2,
h3,
p,
ul,
ol,
li,
form,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Basic styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  background-color: white;
}

th,
td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

th {
  background-color: #f0f0f0;
  font-weight: bold;
}

tfoot td {
  font-weight: bold;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type="number"] {
  width: 50%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* Additional styling for plus and minus buttons */
.minus,
.plus {
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
}

.add-button-container {
  text-align: center;
  margin-top: 20px;
}


document.addEventListener("DOMContentLoaded", function () {
  const products = document.querySelectorAll("#product-table tbody tr");
  const totalPriceCell = document.querySelector("#total-price");
  const totalDiscountCell = document.querySelector("#total-discount");
  const totalTaxCell = document.querySelector("#total-tax");
  const grandTotalCell = document.querySelector("#grand-total");

  function updateRowTotal(row) {
    const quantity = parseFloat(row.querySelector(".quantity").value);
    const price = parseFloat(row.querySelector(".price").innerText);
    const discount = parseFloat(row.querySelector(".discount").value);
    const tax = Math.ceil(quantity * price * 0.125); // Calculate tax and round up

    const total = (quantity * price - discount - tax).toFixed(2);
    row.querySelector(".total").innerText = total;
    row.querySelector(".tax").value = tax;

    updateTotals();
  }

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

    products.forEach((product) => {
      total += parseFloat(product.querySelector(".total").innerText);
      totalDiscount += parseFloat(product.querySelector(".discount").value);
      totalTax += parseFloat(product.querySelector(".tax").value);
    });

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

  products.forEach((product) => {
    const minusButton = product.querySelector(".minus");
    const plusButton = product.querySelector(".plus");
    const quantityInput = product.querySelector(".quantity");
    const discountInput = product.querySelector(".discount");
    const taxInput = product.querySelector(".tax");

    minusButton.addEventListener("click", () => {
      if (quantityInput.value > 1) {
        quantityInput.value = parseInt(quantityInput.value) - 1;
        updateRowTotal(product);
      }
    });

    plusButton.addEventListener("click", () => {
      quantityInput.value = parseInt(quantityInput.value) + 1;
      updateRowTotal(product);
    });

    quantityInput.addEventListener("change", () => {
      updateRowTotal(product);
    });

    discountInput.addEventListener("change", () => {
      updateRowTotal(product);
    });

    taxInput.addEventListener("change", () => {
      updateRowTotal(product);
    });

    updateRowTotal(product);
  });
});