---
title: Tip Calculator
---
## Tip Calculator
A Tip Calculator is a calculator that calculates a tip based on the percentage of the total bill.
## Step 1 - HTML:
We create a form in order to enter the preferred amount:
```html
Tip Calculator
Tip Calculator
Results
Tip amount
Total Bill with Tip
```
## Step 2 - CSS:
You design the style however you want. You can also use CSS to hide the results and show them through JavaScript after the user fills in the form:
```css
#results {
display:none;
}
```
## Step 3: JavaScript:
We add onchange event. The onchange event occurs when user interacts with the form.
This action will execute a function that computes the final bill amount based on the percentage tip, then returns the results.
```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'
}
```
You can see a working example and its code on [Codepen.io](https://codepen.io/voula12/pen/djrZGw).