Handy VAT calculator on JS

Antony Kidless — Wed, 03 Jun 2020 12:12:26 +0000

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

Multiple PWA on the same website

Antony Kidless — Mon, 06 Jan 2020 10:51:46 +0000

Now I will show how to publish 2 PWA within the same domain. This app randomly generates Yes or No.

First PWA

The first application is – Yes / No Wheel.

First you need to create a manifest.json

{
    "name": "Yes or No Wheel",
    "short_name": "Yes / No Wheel",
    "start_url": "/yes-no-decision-maker/wheel-spinner/",
    "scope": "/yes-no-decision-maker/wheel-spinner/",
    "display": "standalone",
    "background_color": "#607D8B",
    "theme_color": "#607D8B",
    "description": "Yes or No? Spin the wheel to decide.",
    "icons": [{
      "src": "/img/icons/pwa_48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }]
  }

Then we create a service worker

const cacheVersion = 'v1';
const urlsToPrefetch = [
  '/yes-no-decision-maker/wheel-spinner/',
];

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheVersion).then(function(cache) {
      return cache.addAll(urlsToPrefetch);
    })
  );
});


this.addEventListener('fetch', event => {
  let responsePromise = caches.match(event.request).then(response => {
    return response || fetch(event.request)
  });

  event.respondWith(responsePromise);
});

Now we connect the manifest.json

<link rel="manifest" href="https://igenerator.net/yes-no-decision-maker/wheel-spinner/manifest.json">

if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/yes-no-decision-maker/wheel-spinner/sw.js', { scope: '/yes-no-decision-maker/wheel-spinner/' }).then(function(registration) {
          console.log('Service worker registration succeeded:', registration);
        }).catch(function(error) {
          console.log('Service worker registration failed:', error);
        });
      } else {
        console.log('Service workers are not supported.');
      }

Second PWA

Second application – Yes / No Button. We do by analogy as in the first case, replacing only the URL and the name of the application.

Forem: Antony Kidless

Handy VAT calculator on JS

Multiple PWA on the same website

First PWA

Second PWA