---
title: Tip Calculator
localeTitle: Тип компьютера
---
## Калькулятор подсказок
Калькулятор подсказок - калькулятор, который вычисляет подсказку на основе процента от общего счета.
## Шаг 1 - HTML:
Мы создаем форму для ввода предпочтительной суммы:
```html
Tip Calculator
Tip Calculator
Results
Tip amount
Total Bill with Tip
```
## Шаг 2 - CSS:
Вы разрабатываете стиль, как хотите. Вы также можете использовать CSS для скрытия результатов и отображения их через JavaScript после заполнения пользователем формы:
```css
#results {
display:none;
}
```
## Шаг 3: JavaScript:
Мы добавляем событие onchange. Событие onchange происходит, когда пользователь взаимодействует с формой.
Это действие будет выполнять функцию, которая вычисляет окончательную сумму счета на основе процентного наконечника, а затем возвращает результаты.
```javascript
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](https://codepen.io/voula12/pen/djrZGw) .