81 lines
2.8 KiB
JavaScript
81 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const itemForm = document.getElementById('item-form');
|
|
const estimateItems = document.getElementById('estimate-items');
|
|
const subtotalEl = document.getElementById('subtotal');
|
|
const taxEl = document.getElementById('tax');
|
|
const totalEl = document.getElementById('total');
|
|
const printBtn = document.getElementById('print-btn');
|
|
const emptyState = document.getElementById('empty-state');
|
|
|
|
let items = [];
|
|
|
|
const updateTotals = () => {
|
|
const subtotal = items.reduce((acc, item) => acc + item.total, 0);
|
|
const tax = subtotal * 0.10;
|
|
const total = subtotal + tax;
|
|
|
|
subtotalEl.textContent = `$${subtotal.toFixed(2)}`;
|
|
taxEl.textContent = `$${tax.toFixed(2)}`;
|
|
totalEl.textContent = `$${total.toFixed(2)}`;
|
|
|
|
if (items.length > 0) {
|
|
emptyState.style.display = 'none';
|
|
} else {
|
|
emptyState.style.display = 'block';
|
|
}
|
|
};
|
|
|
|
const renderItems = () => {
|
|
estimateItems.innerHTML = '';
|
|
items.forEach((item, index) => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${item.description}</td>
|
|
<td class="text-end">${item.quantity}</td>
|
|
<td class="text-end">$${item.price.toFixed(2)}</td>
|
|
<td class="text-end fw-bold">$${item.total.toFixed(2)}</td>
|
|
<td class="text-center">
|
|
<button class="btn btn-sm btn-outline-danger remove-btn" data-index="${index}">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</td>
|
|
`;
|
|
estimateItems.appendChild(tr);
|
|
});
|
|
updateTotals();
|
|
};
|
|
|
|
itemForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const description = document.getElementById('item-description').value;
|
|
const quantity = parseInt(document.getElementById('item-quantity').value);
|
|
const price = parseFloat(document.getElementById('item-price').value);
|
|
|
|
if (description && quantity > 0 && price > 0) {
|
|
const newItem = {
|
|
description,
|
|
quantity,
|
|
price,
|
|
total: quantity * price
|
|
};
|
|
items.push(newItem);
|
|
renderItems();
|
|
itemForm.reset();
|
|
}
|
|
});
|
|
|
|
estimateItems.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('remove-btn') || e.target.closest('.remove-btn')) {
|
|
const button = e.target.closest('.remove-btn');
|
|
const index = parseInt(button.dataset.index);
|
|
items.splice(index, 1);
|
|
renderItems();
|
|
}
|
|
});
|
|
|
|
printBtn.addEventListener('click', () => {
|
|
window.print();
|
|
});
|
|
|
|
updateTotals();
|
|
}); |