73 lines
3.1 KiB
JavaScript
73 lines
3.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const addItemForm = document.getElementById('addItemForm');
|
|
const estimateItems = document.getElementById('estimateItems').getElementsByTagName('tbody')[0];
|
|
const summarySubtotal = document.getElementById('summarySubtotal');
|
|
const summaryTax = document.getElementById('summaryTax');
|
|
const summaryTotal = document.getElementById('summaryTotal');
|
|
const taxRate = 0.10; // 10%
|
|
|
|
// Set current date
|
|
document.getElementById('estimateDate').valueAsDate = new Date();
|
|
|
|
addItemForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
const description = document.getElementById('itemDescription').value;
|
|
const quantity = parseFloat(document.getElementById('itemQuantity').value);
|
|
const price = parseFloat(document.getElementById('itemPrice').value);
|
|
|
|
if (description && quantity > 0 && price >= 0) {
|
|
addItem(description, quantity, price);
|
|
addItemForm.reset();
|
|
document.getElementById('itemQuantity').value = 1;
|
|
document.getElementById('itemPrice').value = "0.00";
|
|
}
|
|
});
|
|
|
|
function addItem(description, quantity, price) {
|
|
const row = estimateItems.insertRow();
|
|
const total = quantity * price;
|
|
|
|
row.innerHTML = `
|
|
<td><input type="text" class="form-control border-0" value="${description}"></td>
|
|
<td><input type="number" class="form-control border-0 item-quantity" value="${quantity}" min="1"></td>
|
|
<td><input type="number" class="form-control border-0 item-price text-end" value="${price.toFixed(2)}" step="0.01" min="0"></td>
|
|
<td class="text-end item-total">${total.toFixed(2)}</td>
|
|
<td class="text-center"><button class="btn btn-sm btn-outline-danger remove-item">×</button></td>
|
|
`;
|
|
|
|
row.querySelector('.remove-item').addEventListener('click', function () {
|
|
row.remove();
|
|
updateSummary();
|
|
});
|
|
|
|
row.querySelectorAll('.item-quantity, .item-price').forEach(input => {
|
|
input.addEventListener('input', function () {
|
|
const newQuantity = parseFloat(row.querySelector('.item-quantity').value);
|
|
const newPrice = parseFloat(row.querySelector('.item-price').value);
|
|
const newTotal = newQuantity * newPrice;
|
|
row.querySelector('.item-total').textContent = newTotal.toFixed(2);
|
|
updateSummary();
|
|
});
|
|
});
|
|
|
|
updateSummary();
|
|
}
|
|
|
|
function updateSummary() {
|
|
let subtotal = 0;
|
|
estimateItems.querySelectorAll('tr').forEach(row => {
|
|
subtotal += parseFloat(row.querySelector('.item-total').textContent);
|
|
});
|
|
|
|
const tax = subtotal * taxRate;
|
|
const total = subtotal + tax;
|
|
|
|
summarySubtotal.textContent = `$${subtotal.toFixed(2)}`;
|
|
summaryTax.textContent = `$${tax.toFixed(2)}`;
|
|
summaryTotal.textContent = `$${total.toFixed(2)}`;
|
|
}
|
|
|
|
// Add a default item to get started
|
|
addItem('Example Item', 1, 100);
|
|
});
|