Let Us Boost Your Brand To 1,000s Locally... FREE!

Add your custom HTML here

// JavaScript for the calculator functionality document.addEventListener('DOMContentLoaded', function() { // Initialize variables and elements const calculator = document.getElementById('service-quote-calculator'); const addServiceBtn = document.getElementById('add-service'); const generateQuoteBtn = document.getElementById('generate-quote'); const serviceItems = document.querySelector('.service-items'); // Services data - this would be customizable per business const services = { 'service1': { name: 'Basic Service Call', rate: 75 }, 'service2': { name: 'Emergency Service', rate: 125 }, // Add more services as needed }; // Add service row addServiceBtn.addEventListener('click', function() { const newItem = document.createElement('div'); newItem.className = 'service-item'; newItem.innerHTML = ` Select Service ${Object.keys(services).map(key => ` ${services[key].name} ` ).join('')} $0.00 X `; serviceItems.appendChild(newItem); // Add event listeners to new elements addItemListeners(newItem); }); // Calculate totals function calculateTotals() { let subtotal = 0; // Calculate each line item document.querySelectorAll('.service-item').forEach(item => { const serviceType = item.querySelector('.service-type').value; const quantity = parseFloat(item.querySelector('.quantity').value) || 0; let rate = parseFloat(item.querySelector('.rate').value) || 0; // Auto-fill rate if service is selected and rate is empty if (serviceType && !rate) { rate = services[serviceType].rate || 0; item.querySelector('.rate').value = rate; } const itemTotal = quantity * rate; item.querySelector('.item-total').textContent = '$' + itemTotal.toFixed(2); subtotal += itemTotal; }); // Calculate tax and discount document.getElementById('subtotal').textContent = '$' + subtotal.toFixed(2); const taxRate = parseFloat(document.getElementById('tax-rate').value) || 0; const taxAmount = subtotal * (taxRate / 100); document.getElementById('tax-amount').textContent = '$' + taxAmount.toFixed(2); const discountRate = parseFloat(document.getElementById('discount-rate').value) || 0; const discountAmount = subtotal * (discountRate / 100); document.getElementById('discount-amount').textContent = '$' + discountAmount.toFixed(2); const total = subtotal + taxAmount - discountAmount; document.getElementById('total').textContent = '$' + total.toFixed(2); } // Add event listeners to items function addItemListeners(item) { item.querySelector('.service-type').addEventListener('change', function() { const serviceType = this.value; if (serviceType && services[serviceType]) { const rateInput = item.querySelector('.rate'); if (!rateInput.value) { rateInput.value = services[serviceType].rate; } } calculateTotals(); }); item.querySelector('.quantity').addEventListener('input', calculateTotals); item.querySelector('.rate').addEventListener('input', calculateTotals); item.querySelector('.remove-item').addEventListener('click', function() { item.remove(); calculateTotals(); }); } // Generate quote generateQuoteBtn.addEventListener('click', function() { const customerName = document.getElementById('customer-name').value; const customerEmail = document.getElementById('customer-email').value; if (!customerName || !customerEmail) { alert('Please enter customer name and email'); return; } // Here you would typically send data to server or generate PDF // For demo, we'll just show an alert alert(`Quote generated for ${customerName}! In a full implementation, this would generate a PDF and/or email the quote.`); }); // Initialize the first row document.querySelectorAll('.service-item').forEach(addItemListeners); });