En tipberegner er en regnemaskine, der beregner et tip baseret på procentdelen af ​​den samlede regning.

Lad os bygge en nu.

Trin 1 - HTML:

Vi opretter en formular for at indtaste det foretrukne beløb:

   Tip Calculator 
Tip Calculator
 $ Tip: 
Results
 Tip amount Total Bill with Tip 

Trin 2 - CSS:

Du designer den stil, som du vil. Du kan også bruge CSS til at skjule resultaterne og vise dem via JavaScript, når brugeren udfylder formularen:

 #results { display:none; }

Trin 3: JavaScript:

Vi tilføjer en onchange-begivenhed. Onchange-hændelsen opstår, når brugeren interagerer med formularen.

Denne handling udfører en funktion, der beregner det endelige regningsbeløb baseret på procentspidsen og derefter returnerer resultaterne.

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' }

Du kan se et fungerende eksempel og dets kode på Codepen.io.