Kako izraditi kalkulator savjeta s HTML-om, CSS-om i JavaScript-om

Kalkulator napojnica je kalkulator koji izračunava napojnicu na temelju postotka ukupnog računa.

Izgradimo sada jedan.

1. korak - HTML:

Izrađujemo obrazac kako bismo unijeli željeni iznos:

   Tip Calculator 

Tip Calculator

$ Tip:
Results
Tip amount Total Bill with Tip

Korak 2 - CSS:

Stil dizajnirate kako god želite. Također možete koristiti CSS da sakrijete rezultate i prikažete ih putem JavaScript-a nakon što korisnik ispuni obrazac:

 #results { display:none; }

Korak 3: JavaScript:

Dodamo događaj izmjene. Događaj onchange događa se kada korisnik stupi u interakciju s obrascem.

Ova će radnja izvršiti funkciju koja izračunava konačni iznos računa na temelju postotka napojnice, a zatim vraća rezultate.

document.querySelector('#tip-form').onchange = function(){ var bill = Number(document.getElementById('billTotal').value); var tip = document.getElementById('tipInput').value; document.getElementById('tipOutput').innerHTML = `${tip}%`; var tipValue = bill * (tip/100) var finalBill = bill + tipValue console.log(finalBill) var tipAmount = document.querySelector('#tipAmount') var totalBillWithTip = document.querySelector('#totalBillWithTip') tipAmount.value = tipValue.toFixed(2); totalBillWithTip.value =finalBill.toFixed(2); //Show Results document.getElementById('results').style.display='block' }

Radni primjer i njegov kôd možete vidjeti na Codepen.io.