A Tippkalkulátor olyan számológép, amely a teljes számla százaléka alapján kiszámítja a borravalót.

Most építsünk egyet.

1. lépés - HTML:

Létrehozunk egy űrlapot a kívánt összeg megadásához:

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

2. lépés - CSS:

Megtervezi a stílust, ahogy akarja. A CSS segítségével elrejtheti az eredményeket, és a JavaScript-en keresztül megjelenítheti őket, miután a felhasználó kitölti az űrlapot:

 #results { display:none; }

3. lépés: JavaScript:

Hozzáadunk egy onchange eseményt. Az onchange esemény akkor következik be, amikor a felhasználó interakcióba lép az űrlappal.

Ez a művelet végrehajt egy olyan függvényt, amely kiszámítja a végső számla összegét a százalékos tipp alapján, majd visszaadja az eredményeket.

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

Működő példát és annak kódját a Codepen.io oldalon tekintheti meg.