---
title: Tip Calculator
localeTitle: Tipo de computador
---
## Calculadora de gorjeta
A Tip Calculator é uma calculadora que calcula uma dica com base na porcentagem da conta total.
## Etapa 1 - HTML:
Criamos um formulário para inserir a quantia preferida:
```html
Tip Calculator
Tip Calculator
Results
Tip amount
Total Bill with Tip
```
## Etapa 2 - CSS:
Você projeta o estilo como quiser. Você também pode usar o CSS para ocultar os resultados e mostrá-los por meio do JavaScript depois que o usuário preencher o formulário:
```css
#results {
display:none;
}
```
## Etapa 3: JavaScript:
Nós adicionamos o evento onchange. O evento onchange ocorre quando o usuário interage com o formulário.
Essa ação executará uma função que calcula o valor final da fatura com base na dica da porcentagem e retorna os resultados.
```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'
}
```
Você pode ver um exemplo de trabalho e seu código no [Codepen.io](https://codepen.io/voula12/pen/djrZGw) .