---
title: Tip Calculator
localeTitle: Tipo de computadora
---
## Calculadora de propinas
Una calculadora de propinas es una calculadora que calcula una propina en función del porcentaje de la factura total.
## Paso 1 - HTML:
Creamos un formulario para ingresar la cantidad preferida:
```html
Tip Calculator
Tip Calculator
Results
Tip amount
Total Bill with Tip
```
## Paso 2 - CSS:
Tú diseñas el estilo como quieras. También puede usar CSS para ocultar los resultados y mostrarlos a través de JavaScript después de que el usuario complete el formulario:
```css
#results {
display:none;
}
```
## Paso 3: JavaScript:
Añadimos el evento onchange. El evento onchange se produce cuando el usuario interactúa con el formulario.
Esta acción ejecutará una función que calcula el monto de la factura final en función del porcentaje de punta y luego devuelve los 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'
}
```
Puede ver un ejemplo de trabajo y su código en [Codepen.io](https://codepen.io/voula12/pen/djrZGw) .