Tip Generator


DEMO



Step by Step Algorithm:

1. The body element contains the content of the document, which in this case is a div element with an id of "tip-calculator".

2. Inside the div, there are several p elements containing input and select elements for the user to input the bill amount and select the tip percentage.

3. There is also a button element with an id of "calculate-button" that will be used to calculate the tip.

4. Another p element contains a span element with an id of "tip-amount" that will be used to display the tip amount.

5. Finally, there is a script element that includes a JavaScript file for handling the calculations and displaying the results.

HTML: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tip Calculator</title>
</head>
<body>
<div id="tip-calculator">
<p>Enter bill amount: $<input type="number" id="bill-amount" value="0"></p>
<p>Select tip percentage: 
<select id="tip-percentage">
<option value="0.1">10%</option>
<option value="0.15">15%</option>
<option value="0.2">20%</option>
<option value="0.25">25%</option>
</select>
</p>
<button id="calculate-button">Calculate</button>
<p>Tip: $<span id="tip-amount">0</span></p>
</div>
<script src="app.js"></script>
</body>
</html>

CSS: 


*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
#tip-calculator {
width: 300px;
margin: 10% auto;
text-align: center;
font-family: sans-serif;
display: flex;
justify-content: space-around;
flex-direction: column;
gap:50px;
}

input[type="number"] {
width: 60px;
text-align: right;
}

select {
width: 75px;
}

button {
background-color: lightblue;
border: none;
padding: 5px 10px;
cursor: pointer;
}

button:hover {
background-color: skyblue;
}
@media screen and (max-width:800px) {
#tip-calculator {
width: auto;
margin: 10%;
text-align: center;
font-family: sans-serif;
display: flex;
justify-content: space-around;
flex-direction: column;
gap:50px;
}
}

Step by Step Algorithm:

1. The code sets an 'onclick' event listener on the element with an id of "calculate-button".

2. When the button is clicked, the anonymous function will be executed.

3. Inside the function, the values of the "bill-amount" and "tip-percentage" elements are retrieved and stored in variables.

4. The tip amount is calculated by multiplying the bill amount by the tip percentage.

5. The calculated tip amount is displayed in the element with an id of "tip-amount".

6. The 'toFixed()' method is used to round the tip amount to two decimal places.

7. The function completes and the tip amount is displayed for the user to see.

Java Script: 


document.getElementById('calculate-button').onclick = function() {
// get user input
var billAmount = document.getElementById('bill-amount').value;
var tipPercentage = document.getElementById('tip-percentage').value;

// calculate tip amount
var tipAmount = billAmount * tipPercentage;

// display tip amount
document.getElementById('tip-amount').innerHTML = tipAmount.toFixed(2);
};

You can improve this project in your own version.

We are ready to release more projects please support us by sharing and visiting webdevmonk