Geometry Calculator Design using HTML CSS and JavaScript

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 = () =>
    //the function called when Calculate button is clicked.
    {
        /*calling a function calculateTip
         which will calculate the tip for the bill.*/
        document.querySelector('#calculate').onclick = calculateTip;
    }
 
function calculateTip() {
    /*assign values of ID : amount, person and service to 
    variables for further calculations.*/
    let amount = document.querySelector('#amount').value;
    let persons = document.querySelector('#persons').value;
    let service = document.querySelector('#services').value;
 
    console.log(service);
    /*if statement will work when user presses 
          calculate without entering values. */
    //so will display an alert box and return.
    if (amount === '' && service === 'Select') {
        alert("Please enter valid values");
        return;
    }
 
    //now we are checking number of persons 
    if (persons === '1')
    //if there is only one person then we need not to display each.
        document.querySelector('#each').style.display = 'none';
    else
    //if there are more than one person we will display each.  
        document.querySelector('#each').style.display = 'block';
 
    /*calculating the tip by multiplying total-bill and type of
     service; then dividing it by number of persons.*/
    //fixing the total amount upto 2 digits of decimal
    let total = (amount * service) / persons;
    total = total.toFixed(2);
 
    //finally displaying the tip value 
    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;
}
 
h1 {
    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

Design a Tip Calculator using HTML, CSS and JavaScript

Geometry Calculator Design using HTML CSS and JavaScript

imsushant12

News

Improve

Article Tags :

Similar Reads

HTML Calculator

HTML calculator is used for performing basic mathematical operations like Addition, subtraction, multiplication, and division. You can find the live preview below, try it: To design the HTML calculator, we will use HTML, and CSS. HTML is used to design the basic structure of the calculator. CSS styl

JavaScript Calculator

To build a simple calculator using JavaScript, we need to handle basic arithmetic operations such as addition, subtraction, multiplication, and division. JavaScript, along with HTML and CSS, is commonly used to create interactive web-based calculators. What We Are Going to CreateWe will build a simp

JavaScript Scientific Calculator

The HTML Scientific Calculator is a tool for performing advanced scientific calculations like finding exponents, logarithms, factorials, and more. This calculator comprises two sections: the input section, where the user types in their mathematical problem, and the output screen, which displays all

JavaScript Neumorphism Effect Calculator

In this article, we will learn how to create a working calculator with the Neumorphism effect using HTML, CSS, and JavaScript. Basic mathematical operations such as addition, subtraction, multiplication, and division can be performed using this calculator. Approach: Neumorphism is a contemporary app

JavaScript Age Calculator

In Age Calculator, we will take the date of birth as the date input and it prints the age from the current date (or specified date). We will create the structure of the Age Calculator using HTML and CSS, and JavaScript will add the functionality to calculate the age in years, months, and days. Appro

JavaScript Tip Calculator

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 perso

JavaScript Geometry Calculator

In this article, we will see how to design a Geometry Calculator using HTML, CSS, and JavaScript. A Geometry calculator is used to calculate the area and parameters of different shapes and figures, like circles, rectangles, squares, triangles, etc. This can be helpful in cases where one wants to cal

JavaScript Aspect Ratio Calculator

In this article, we are going to implement an aspect ratio calculator. An aspect ratio calculator proves to be a useful tool for individuals seeking to determine the proportions of images or videos based on their width and height. Our aspect ratio calculator has a live preview option that enables us

JavaScript Binary Calculator

HTML or HyperText Markup Language along with CSS (Cascading Stylesheet) and JavaScript can be used to develop interactive user applications that can perform certain functionalities. Similarly, a binary calculator can be developed using HTML, CSS, and JS altogether. Binary Calculator performs arithme

JavaScript Percentage Calculator

The percentage calculator is useful for students, shopkeepers, and for solving basic mathematical problems related to percentages. In this article, we are going to learn, how to make a percentage calculator using HTML CSS, and JavaScript Formula used:What is X percent of Y is given by the formula: X