Design a Tip Calculator using HTML, CSS and JavaScript
Last Updated :
27 Dec, 2023
The tip is the money given as a gift for good service, to the person who serves you in a restaurant. In this project, a simple tip calculator is made which takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person. In this article, we are going to learn how to design a Tip Calculator using HTML, CSS, and JavaScript.
Prerequisites:
Approach
- Use HTML to give proper structure to your project.
- Use CSS for styling
- In JavaScript,
- The script is triggered when the window is fully loaded, binding the
calculateTip
function to the “Calculate” button’s click event.
- The
calculateTip
function retrieves input values for amount, number of persons, and service type from corresponding HTML elements.
- Input validation checks if the amount is empty and the service type is set to ‘Select’. If so, an alert is displayed, and further execution is halted.
- Display logic adjusts the visibility of the ‘each’ element based on the number of persons: hidden if there is one person and visible otherwise.
- Tip calculation involves multiplying the amount, and service type, and dividing by the number of persons. The result is displayed with proper formatting on the webpage.
Example: In this example, we are following the above approach.
Javascript
window.onload = () =>
{
document.querySelector( '#calculate' ).onclick = calculateTip;
}
function calculateTip() {
let amount = document.querySelector( '#amount' ).value;
let persons = document.querySelector( '#persons' ).value;
let service = document.querySelector( '#services' ).value;
console.log(service);
if (amount === '' && service === 'Select' ) {
alert( "Please enter valid values" );
return ;
}
if (persons === '1' )
document.querySelector( '#each' ).style.display = 'none' ;
else
document.querySelector( '#each' ).style.display = 'block' ;
let total = (amount * service) / persons;
total = total.toFixed(2);
document.querySelector( '.tip' ).style.display = 'block' ;
document.querySelector( '#total' ).innerHTML = total;
}
|
HTML
< html >
< head >
< link rel = "stylesheet" href = "style.css" >
< script type = "text/javascript" src = "app.js" >
</ script >
</ head >
< body >
< div class = "container" >
< h1 >TIP CALCULATOR</ h1 >
< div class = "wrapper" >
< p >Bill Amount</ p >
< input type = "text" id = "amount" placeholder = "Amount to be paid" > ₹
< p >How was the service ?</ p >
< select id = "services" >
< option selected disabled hidden>
Select
</ option >
< option value = "0.25" >25% - Top Notch</ option >
< option value = "0.20" >20% - Excellent</ option >
< option value = "0.15" >15% - Good</ option >
< option value = "0.10" >10% - Bad</ option >
< option value = "0.05" >5% - Worst</ option >
</ select >
< p >Total number of persons</ p >
< input type = "text" id = "persons" placeholder = "Number of people sharing the bill" >
< button id = "calculate" >Calculate</ button >
</ div >
< div class = "tip" >
< p >Tip Amount</ p >
< span id = "total" >0</ span >₹
< span id = "each" >each</ span >
</ div >
</ div >
</ body >
</ html >
|
CSS
body {
background-color : #001f4f ;
font-family : "Raleway" , sans-serif ;
}
.container {
width : 350px ;
height : 500px ;
background-color : #fff ;
position : absolute ;
left : 50% ;
top : 50% ;
transform: translateX( -50% ) translateY( -50% );
border-radius: 20px ;
}
h 1 {
position : absolute ;
left : 50% ;
top : -60px ;
width : 300px ;
transform: translateX( -50% );
background-color : #ff851b ;
color : #fff ;
font-weight : 100 ;
border-top-left-radius: 20px ;
border-top-right-radius: 20px ;
font-size : 18px ;
text-align : center ;
padding : 10px ;
}
.wrapper {
padding : 20px ;
}
input,
select {
width : 80% ;
border : none ;
border-bottom : 1px solid #0074d9 ;
padding : 10px ;
}
input:focus,
select:focus {
border : 1px solid #0074d9 ;
outline : none ;
}
select {
width : 88% !important ;
}
button {
margin : 20px auto ;
width : 150px ;
height : 50px ;
background-color : #39cccc ;
color : #fff ;
font-size : 16px ;
border : none ;
border-radius: 5px ;
}
.tip {
text-align : center ;
font-size : 18px ;
display : none ;
}
|
Output: Click here to see live code output
Design a Tip Calculator using HTML, CSS and JavaScript
Share your thoughts in the comments
Please Login to comment...