DEV Community

Cover image for Handy VAT calculator on JS
Antony Kidless
Antony Kidless

Posted on • Updated on

Handy VAT calculator on JS

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

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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();
        }
    }

Enter fullscreen mode Exit fullscreen mode

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');
    }
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

If you have comments or suggestions I will be glad to see them in the comments under this post

Top comments (2)

Collapse
 
registriransum profile image
registriransum

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

Collapse
 
iharrybrook10 profile image
harrybrook

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!