Як створити калькулятор підказок за допомогою 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.