So erstellen Sie einen Tipprechner mit HTML, CSS und JavaScript

Ein Trinkgeldrechner ist ein Taschenrechner, der ein Trinkgeld basierend auf dem Prozentsatz der Gesamtrechnung berechnet.

Lassen Sie uns jetzt eine bauen.

Schritt 1 - HTML:

Wir erstellen ein Formular, um den bevorzugten Betrag einzugeben:

   Tip Calculator 

Tip Calculator

$ Tip:
Results
Tip amount Total Bill with Tip

Schritt 2 - CSS:

Sie gestalten den Stil nach Ihren Wünschen. Sie können CSS auch verwenden, um die Ergebnisse auszublenden und über JavaScript anzuzeigen, nachdem der Benutzer das Formular ausgefüllt hat:

 #results { display:none; }

Schritt 3: JavaScript:

Wir fügen ein Onchange-Ereignis hinzu. Das Ereignis onchange tritt auf, wenn der Benutzer mit dem Formular interagiert.

Diese Aktion führt eine Funktion aus, die den endgültigen Rechnungsbetrag basierend auf dem prozentualen Trinkgeld berechnet und dann die Ergebnisse zurückgibt.

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

Sie können ein funktionierendes Beispiel und seinen Code auf Codepen.io sehen.