Untitled
html
2 months ago
6.5 kB
2
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); }); });