Sådan oprettes en tipberegner med HTML, CSS og JavaScript
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.