Πώς να δημιουργήσετε μια αριθμομηχανή συμβουλών με HTML, CSS και JavaScript

Ένας υπολογιστής συμβουλών είναι ένας υπολογιστής που υπολογίζει μια συμβουλή βάσει του ποσοστού του συνολικού λογαριασμού.

Ας φτιάξουμε ένα τώρα.

Βήμα 1 - HTML:

Δημιουργούμε μια φόρμα για να εισαγάγετε το προτιμώμενο ποσό:

   Tip Calculator 

Tip Calculator

$ Tip:
Results
Tip amount Total Bill with Tip

Βήμα 2 - CSS:

Σχεδιάζετε το στυλ όπως θέλετε. Μπορείτε επίσης να χρησιμοποιήσετε το CSS για να αποκρύψετε τα αποτελέσματα και να τα δείξετε μέσω JavaScript αφού ο χρήστης συμπληρώσει τη φόρμα:

 #results { display:none; }

Βήμα 3: JavaScript:

Προσθέτουμε ένα συμβάν onchange. Το συμβάν onchange εμφανίζεται όταν ο χρήστης αλληλεπιδρά με τη φόρμα.

Αυτή η ενέργεια θα εκτελέσει μια συνάρτηση που υπολογίζει το τελικό ποσό λογαριασμού με βάση το ποσοστό άκρης και στη συνέχεια επιστρέφει τα αποτελέσματα.

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

Μπορείτε να δείτε ένα λειτουργικό παράδειγμα και τον κωδικό του στο Codepen.io.