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

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

Comments

[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

[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!