Kako pomoću JavaScripta napraviti kalkulator netto plaće za FBiH

Ovo je primjer JavaScript koda za izračun neto plaće na osnovu unesene bruto plaće uz primjenu stopa doprinosa za FBiH FBiH: 17% za penzijsko i invalidsko osiguranje, 12,5% za zdravstveno osiguranje i 1,5% za osiguranje u slučaju nezaposlenosti (ukupno 31% na bruto platu). Ovaj primjer ne uključuje faktor ličnog odbitka prema poreznoj kartici, nego samo skida iznos doprinosa, ali uz pojašnjenja ispod može se kreirati i realan kalkulator netto plaće.

Kloniraj lekciju

Objašnjenje koda:

Šta ovaj kod radi?

Ovaj kod omogućava korisniku da unese bruto platu u polje na HTML stranici, klikne na dugme, i dobije neto platu (iznos nakon odbijanja doprinosa) prikazanu direktno na stranici.

JavaScript ovdje:

1. Čita korisnički unos iz HTML forme.
2. Računa neto platu na osnovu unaprijed definisanih pravila.
3. Prikazuje rezultat direktno na stranici.

---

Objašnjenje koda korak po korak:

1. Prva funkcija: calculateNetSalary

function calculateNetSalary(bruttoSalary) {
    const pensionInsurance = 0.17; // 17% za penzijsko osiguranje
    const healthInsurance = 0.125; // 12.5% za zdravstveno osiguranje
    const unemploymentInsurance = 0.015; // 1.5% za nezaposlenost
    const totalContributions = pensionInsurance + healthInsurance + unemploymentInsurance;
    const nettoSalary = bruttoSalary * (1 - totalContributions);
    return nettoSalary.toFixed(2); // Zaokružujemo na 2 decimale
}

Šta se dešava ovdje:

1. bruttoSalary: Ovo je broj koji funkcija prima kao ulaz (bruto plata).
2. Doprinosi: Definisani su kao konstante:
   • Penzijsko osiguranje (17%)
   • Zdravstveno osiguranje (12.5%)
   • Osiguranje za nezaposlenost (1.5%)
3. Ukupni doprinosi: Sabiremo sve doprinose i izračunamo koliko ukupno procenata treba odbiti.
4. Izračun neto plate: Bruto plata se množi s (1 - totalContributions) da bi se dobila neto plata.
5. Zaokruživanje: Funkcija koristi .toFixed(2) da ograniči rezultat na 2 decimalna mjesta (primjer: 1234.56).

Šta funkcija radi s rezultatima:

• Izračunatu vrijednost vraća onome ko ju je pozvao. Ona ne prikazuje ništa na ekranu direktno.

---

2. Druga funkcija: calculate

function calculate() {
    const bruttoSalary = document.getElementById('bruttoSalary').value;
    const resultDiv = document.getElementById('result');
    if (bruttoSalary && !isNaN(bruttoSalary) && bruttoSalary > 0) {
        const nettoSalary = calculateNetSalary(Number(bruttoSalary));
        resultDiv.innerHTML = `Vaša neto plaća iznosi: <strong>${nettoSalary} KM</strong>`;
    } else {
        resultDiv.innerHTML = `<span style="color: red;">Unesite validan iznos bruto plaće!</span>`;
    }
}

Šta se dešava ovdje:

1. document.getElementById('bruttoSalary').value:
   • Ovom linijom JavaScript “traži” HTML element sa id="bruttoSalary".
   • Dohvata vrijednost koju je korisnik unio u to polje (to je bruto plata).
2. document.getElementById('result'):
   • Ovo pronalazi HTML element s id="result", gdje će rezultat biti prikazan.
3. Validacija unosa:
   • Provjerava da li je bruto plata unijeta (bruttoSalary nije prazno).
   • Provjerava da li je broj (!isNaN(bruttoSalary)).
   • Provjerava da li je veći od nule (bruttoSalary > 0).
4. Pozivanje funkcije calculateNetSalary:
   • Ako su svi uslovi ispunjeni, funkcija poziva calculateNetSalary s bruto platom kao argumentom i dobija neto platu.
5. Prikaz rezultata:
   • Ako je unos ispravan, neto plata se prikaže unutar resultDiv kao HTML sadržaj.
   • Ako unos nije ispravan, prikaže se poruka o grešci crvenim slovima.

---

Kako funkcije rade s HTML-om?

1. HTML omogućava korisnički unos:
   • HTML ima <input> polje za unos bruto plate i <div> za prikaz rezultata.
   <input type="number" id="bruttoSalary" placeholder="Unesite bruto platu"> <div id="result"></div>
2. Interakcija funkcija s HTML-om:
   • Funkcija calculate koristi document.getElementById da pronađe i čita podatke iz polja za unos (bruttoSalary).
   • Na osnovu tih podataka, funkcija poziva calculateNetSalary za izračunavanje.
   • Rezultat se “piše” nazad u HTML element sa ID-om result koristeći innerHTML.
3. Korisnička akcija pokreće JavaScript:
   • Kada korisnik unese bruto platu i klikne dugme (koje ima događaj onclick="calculate()"), funkcija calculate se pokreće i izvršava sav posao.

---

Zajednički rad HTML-a i JavaScript-a:

1. HTML pruža strukturu:
   • Polje za unos (<input>), mjesto za rezultat (<div>), i dugme za pokretanje proračuna.
2. JavaScript daje život stranici:
   • Čita podatke od korisnika, računa rezultat, i vraća ga na stranicu.
   • Ako ima grešaka (npr. korisnik ne unese ništa ili unese negativan broj), JavaScript prikaže poruku upozorenja.

---

Konačan kod:

HTML i JavaScript rade zajedno da stranica funkcioniše:

HTML:

 <input type="number" id="bruttoSalary" placeholder="Unesite bruto platu">
<button onclick="calculate()">Izračunaj</button>
<div id="result"></div>

JavaScript:

 function calculateNetSalary(bruttoSalary) {
    const pensionInsurance = 0.17;
    const healthInsurance = 0.125;
    const unemploymentInsurance = 0.015;
    const totalContributions = pensionInsurance + healthInsurance + unemploymentInsurance;
    const nettoSalary = bruttoSalary * (1 - totalContributions);
    return nettoSalary.toFixed(2);
}

function calculate() {
    const bruttoSalary = document.getElementById('bruttoSalary').value;
    const resultDiv = document.getElementById('result');
    if (bruttoSalary && !isNaN(bruttoSalary) && bruttoSalary > 0) {
        const nettoSalary = calculateNetSalary(Number(bruttoSalary));
        resultDiv.innerHTML = `Vaša neto plaća iznosi: <strong>${nettoSalary} KM</strong>`;
    } else {
        resultDiv.innerHTML = `<span style="color: red;">Unesite validan iznos bruto plaće!</span>`;
    }
}