I want to show you a handy VAT calculator written on JS that I did in a few minutes. With this VAT calculator you can easily find out how much VAT you need to pay
First, make HTML markup:
<div id="calc">
<div>
<label for="vat_rate">Rate of VAT, %</label>
<input type="number" step="0.01" min="0" id="vat_rate" size="30" value='23'>
</div>
<div>
<label for="net_price">Net price (exclude VAT), €</label>
<input type="number" step="0.01" min="0" id="net_price" size="30" value>
</div>
<div>
<label for="gross_price">Gross price (include VAT), €</label>
<input type="number" step="0.01" min="0" id="gross_price" size="30" value>
</div>
<br>
<div>
<label for="tax_amount">VAT amount, €</label>
<input type="number" step="0.01" min="0" id="tax_amount" size="30" value>
</div>
</div>
Then we create input event handlers
function net_change() {
set_variable();
gross_price.value = (net_price.value *(1+(vat_rate.value/100))).toFixed(2);
tax_amount.value = (gross_price.value - net_price.value).toFixed(2);
lastFunction = 'net';
}
function gross_change() {
set_variable();
net_price.value = (gross_price.value / (1 + (vat_rate.value/100))).toFixed(2);
tax_amount.value = (gross_price.value - net_price.value).toFixed(2);
lastFunction = 'gross';
}
function amount_change() {
set_variable();
net_price.value = ((tax_amount.value / vat_rate.value) * 100).toFixed(2);
gross_price.value = (+net_price.value + +tax_amount.value).toFixed(2);
lastFunction = 'amount';
}
function rate_change() {
if (lastFunction === 'net') {
net_change();
}
else if (lastFunction === 'gross') {
gross_change();
}
else {
amount_change();
}
}
Determine the values from inputs
function set_variable(){
var vat_rate = document.getElementById('vat_rate');
var net_price = document.getElementById('net_price');
var gross_price = document.getElementById('gross_price');
var tax_amount = document.getElementById('tax_amount');
}
And add eventlisteners to these fields
var vat_rate = document.getElementById('vat_rate');
var net_price = document.getElementById('net_price');
var gross_price = document.getElementById('gross_price');
var tax_amount = document.getElementById('tax_amount');
var lastFunction = 'none';
document.getElementById('gross_price').focus();
vat_rate.addEventListener("input", rate_change, false);
net_price.addEventListener("input", net_change, false);
gross_price.addEventListener("input", gross_change, false);
tax_amount.addEventListener("input", amount_change, false);
If you have comments or suggestions I will be glad to see them in the comments under this post
Top comments (2)
Hey Antony, your app looks great! Just a feedback, you might include radio buttons of VAT percentages. This is to save time when people are going to use your app multiple times in the day. Something like this one vat-calculator.uk
Cheers
Your VAT calculator implemented in JavaScript looks well-structured and functional, providing a user-friendly interface for calculating VAT amounts. The event handlers and input listeners make the calculator dynamic and responsive. Great job!