Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Accountancy Fee Calculator - ASN Partners UK Fee Estimate</title> <meta name="description" content="Calculate your accountancy fees based on turnover and services. ASN Partners UK offers a simple and modern fee estimation calculator."> <meta name="keywords" content="accountancy, fees, calculator, turnover, service, ASN Partners UK"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous"> <script type="text/javascript"> try { document.addEventListener("DOMContentLoaded", function() { const state = { clientType: "Limited Company", turnover: 0, accounts: false, vat: false, payroll: { active: false, count: 0, frequency: 'monthly' }, pension: { active: false, count: 0 }, selfAssessment: false, properties: 0, discount: 0 }; const serviceRates = { accounts: 250, vat: 150, payroll: { monthly: 100, quarterly: 300 }, pension: { 0: 0, 5: 180, 10: 195, 15: 235, 20: 270, 30: 365, 40: 465, 50: 550, 75: 650, 100: 740, 101: 850 }, selfAssessment: 140, properties: (count) => count * 100, // Each property fee p11d: 200 }; const toggleEmployeeCountDropdown = () => { const payrollService = document.getElementById('payrollToggle').checked; const countDropdown = document.getElementById('payrollCountDropdown'); countDropdown.style.display = payrollService ? 'block' : 'none'; }; const updateFees = () => { let feesSubtotal = 0; if (state.accounts) feesSubtotal += serviceRates.accounts; if (state.vat) feesSubtotal += serviceRates.vat; if (state.payroll.active) feesSubtotal += serviceRates.payroll[state.payroll.frequency] * state.payroll.count; if (state.pension.active) feesSubtotal += serviceRates.pension[state.pension.count] || 0; if (state.selfAssessment) feesSubtotal += serviceRates.selfAssessment; if (state.properties > 0) feesSubtotal += serviceRates.properties(state.properties); feesSubtotal += serviceRates.p11d; // Add P11D service fee const discountAmount = feesSubtotal * (state.discount / 100); const feesTotal = feesSubtotal - discountAmount; const vatAmount = feesTotal * 0.2; // VAT on total after discount const grandTotal = feesTotal + vatAmount; const monthlyFee = grandTotal / 12; document.getElementById('subtotal').innerText = `£${feesSubtotal.toFixed(2)}`; document.getElementById('discount').innerText = `£${discountAmount.toFixed(2)}`; document.getElementById('vat').innerText = `£${vatAmount.toFixed(2)}`; document.getElementById('total').innerText = `£${grandTotal.toFixed(2)}`; document.getElementById('monthly').innerText = `£${monthlyFee.toFixed(2)}`; }; const resetInputs = () => { state.clientType = "Limited Company"; state.turnover = 0; state.accounts = false; state.vat = false; state.payroll.active = false; state.payroll.count = 0; state.pension.active = false; state.pension.count = 0; state.selfAssessment = false; state.properties = 0; state.discount = 0; document.querySelectorAll("input[type='checkbox']").forEach(el => el.checked = false); document.getElementById('turnoverDropdown').value = '0'; document.getElementById('payrollCountDropdown').value = '0'; document.getElementById('propertyCountDropdown').value = '0'; document.getElementById('discountInput').value = ''; updateFees(); }; const handleEmployeeCountDisplay = () => { const payrollService = document.getElementById('payrollToggle').checked; const pensionService = document.getElementById('pension').checked; const payrollCountDropdown = document.getElementById('payrollCountDropdown'); const pensionCountDropdown = document.getElementById('pensionCountDropdown'); payrollCountDropdown.style.display = payrollService ? 'block' : 'none'; pensionCountDropdown.style.display = pensionService ? 'block' : 'none'; }; document.querySelectorAll("input[type='checkbox']").forEach(el => { el.addEventListener('change', () => { if (el.id === 'payrollToggle') { state.payroll.active = el.checked; toggleEmployeeCountDropdown(); } else if (el.id === 'pension') { state.pension.active = el.checked; handleEmployeeCountDisplay(); } else { state[el.id] = el.checked; } updateFees(); }); }); document.getElementById('turnoverDropdown').addEventListener('change', (e) => { state.turnover = parseInt(e.target.value) || 0; updateFees(); }); document.getElementById('payrollCountDropdown').addEventListener('change', (e) => { state.payroll.count = parseInt(e.target.value) || 0; updateFees(); }); document.getElementById('pensionCountDropdown').addEventListener('change', (e) => { state.pension.count = parseInt(e.target.value) || 0; updateFees(); }); document.getElementById('propertyCountDropdown').addEventListener('change', (e) => { state.properties = parseInt(e.target.value) || 0; updateFees(); }); document.getElementById('discountInput').addEventListener('input', (e) => { state.discount = parseFloat(e.target.value) || 0; updateFees(); }); document.getElementById('resetButton').addEventListener('click', resetInputs); updateFees(); }); } catch (error) { throw error; } </script> <style> body { background-color: #f8f9fa; color: #495057; } #main-container { background-color: #800000; border-radius: 8px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); margin-top: 20px; } h1 { color: white; text-align: center; } label { color: white; } .fee-total { font-size: 1.5em; margin-top: 20px; color: #81c784; } .reset-button { background-color: #dc3545; color: white; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; transition: background-color 0.3s; } .reset-button:hover { background-color: #c82333; } .number-options { display: none; } </style> <link rel="canonical" href="https://calculator.tools/prompt/9989/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <h1>ASN Partners UK Fee Estimate</h1> <form> <div class="mb-3"> <label for="clientType" class="form-label">Client Type:</label> <select class="form-select" id="clientType"> <option value="Limited Company">Limited Company</option> <option value="Sole Trader">Sole Trader</option> <option value="Partnership">Partnership</option> <option value="Individual">Individual</option> </select> </div> <div class="mb-3"> <label for="turnoverDropdown" class="form-label">Annual Turnover (£):</label> <select class="form-select" id="turnoverDropdown"> <option value="0">£0k – £90k</option> <option value="91">£91k – £99k</option> <option value="100">£100k – £149k</option> <option value="150">£150k – £249k</option> <option value="250">£250k – £349k</option> <option value="350">£350k – £499k</option> <option value="500">£500k – £749k</option> <option value="750">£750k – £999k</option> <option value="1000">£1m+</option> </select> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="accounts" /> <label class="form-check-label" for="accounts">Accounts</label> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="vat" /> <label class="form-check-label" for="vat">VAT</label> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="payrollToggle" /> <label class="form-check-label" for="payrollToggle">Payroll</label> <div id="payrollCountDropdown" class="number-options mt-3" style="display: none;"> <label>Number of Employees:</label> <select class="form-select"> <option value="0">Select</option> <option value="1">01–05</option> <option value="2">06–10</option> <option value="3">11–15</option> <option value="4">16–20</option> <option value="5">21–30</option> <option value="6">31–40</option> <option value="7">41–50</option> <option value="8">51–75</option> <option value="9">76–100</option> <option value="10">100+</option> </select> </div> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="pension" /> <label class="form-check-label" for="pension">Pension</label> <div id="pensionCountDropdown" class="number-options mt-3" style="display: none;"> <label>Number of Employees:</label> <select class="form-select"> <option value="0">Select</option> <option value="1">01–05</option> <option value="2">06–10</option> <option value="3">11–15</option> <option value="4">16–20</option> <option value="5">21–30</option> <option value="6">31–40</option> <option value="7">41–50</option> <option value="8">51–75</option> <option value="9">76–100</option> <option value="10">100+</option> </select> </div> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="selfAssessment" /> <label class="form-check-label" for="selfAssessment">Self Assessment</label> </div> <div class="mb-3"> <label for="propertyCountDropdown" class="form-label">Number of Properties:</label> <select class="form-select" id="propertyCountDropdown"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6+</option> </select> </div> <div class="mb-3"> <label for="discountInput" class="form-label">Discount (%):</label> <input type="number" class="form-control" id="discountInput" placeholder="Enter discount" /> </div> <button type="button" id="resetButton" class="reset-button">Reset All Inputs</button> </form> <div class="fee-total"> <div>Subtotal: <span id="subtotal">£0.00</span></div> <div>Discount: <span id="discount">£0.00</span></div> <div>VAT: <span id="vat">£0.00</span></div> <div>Total Annual Fee: <span id="total">£0.00</span></div> <div>Total Monthly Fee: <span id="monthly">£0.00</span></div> </div> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Accountancy Fee Calculator - ASN Partners UK Fee Estimate
Calculator Tools