Build your own Tip Calculator in HTML, CSS, JAVASCRIPT in just 5 minutes

Build your own Tip Calculator in HTML, CSS, JAVASCRIPT in just 2 minutes

Tip calculator, though an unnoticeable tool, is of great value to the accountants and proprietors of hotels. This little tool helps to maintain records and keep track of the gigantic everyday cash-flow which otherwise could lead to massive money matters!

In this article, we would instruct you on how to develop a Tip calculator all by yourself.

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 billing amount, type of service, and a number of persons as input. As per the three inputs it generates a tip for the serving person.

To find out the tip we will take input from the user: Bill Amount (it is the amount of the total bill, we are taking this into amount variable), for the type of service we are using a drop-down menu having quality as the options in percentage (like good, bad, excellent, etc.), lastly, we are taking the number of persons as input (it will help to divide the tip equally among all the person). A per the inputs from the user, we are calculating the tip and then printing it

Let’s begin

In order to build a tip calculator, we would use three different programming languages, viz – HTML, CSS, and JavaScript. The importance of each of the language is specified below:

HTML:

HTML is used to create a layout of tip calculator. HTML forms the basics of the project and specifies its parameters.

CSS:

The next step in the process is CSS which helps in making the calculator more presentable and attractive for better outlook.

JavaScript:

The last step in the process will be giving the calculator a logical implementation which would be done using JavaScript.

Let’s gets started with building your own ‘Tip Calculator’

Following code shows the layout of the Tip Calculator while using HTML:

HTML Code

<!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">
    <title>Tip Calculator in HTML, CSS, JAVASCRIPT</title>
</head>
<body>
    <div id="container">

        <h2>Tip Calculator</h2>
        
        <div id="calculator">
        
        <div id="form">
        
        <h3>How much was your bill?</h3>
        
        <input id="billAmt" type="text" placeholder="Bill Amount">
        
        <h3><p>How was the service?</p>
        
        <select id="servicequality">
        
        <option>Choose One </option>
        
        <option value="0.0">0%-Average</option>
        
        <option value="0.1">10%-Good</option>
        
        <option value="0.2">20%-Excellent</option>
        
        </select></h3>
        
        <button type="button" id="calculate">Calculate!</button>
        
        </div>
        
        <div id="totaltip">
        
        <h3>Tip Total:-
        
        <span id=tipTotal></span></h3>
        
        <h3>Bill Total:-
        
        <span id=billTotal></span></h3>
        
        </div>

</body>
</html>

 

HTML stands for Hyper Text Markup Language used for creating Web pages. It describes the structure of Web pages using markup. The building blocks of HTML is HTML elements. With HTML one can construct images and other objects such as interactive forms. Structural Semantics such as headings, paragraphs, lists, links, quotes and other items facilitates a way to create a structured document.

Elements in HTML is denoted by tags “<tagname>”. These tags mostly comes in pair i.e <h1>(opening tag)  and  </h1>(closing tag). Another important component is the document type declaration denoted as “!DOCTYPE”, which triggers standards mode rendering.

The parameter that we have considered for the tool are as follows:

  • Bill amount.
  • Service quality.
  • Tip Total.
  • Bill Total.

After deciding the parameters to be included we start with the structure of the tool.

HTML Output

Tip Calculator in HTML, CSS, JAVASCRIPT

CSS Code

body {

background: linear-gradient(to left, #8E0E00, #1F1C18);

}

#container {

height: 350px;

width: 350px;

margin: 100px auto;

background: #f7f7f7;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);

border-radius: 20px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

}

h2 {

background:#1F030C ;

color: white;

margin: 0;

padding: 10px 100px;

text-transform: uppercase;

font-size: 16px;

font-weight: bold;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

}

h3{

margin: 0;



}

button {

text-transform: uppercase;

font-weight: bold;

display: block;

margin: 30px auto;

background: #AD133A;

border-radius: 5px;

width: 200px;

height: 50px;

font-size: 15px;

color: white;

}

#form{

padding: 10px 10px;

}

#totaltip{

padding: 10px 10px;

}

Cascading Style Sheet (CSS) is used to style the HTML. HTML only provides the outlook of the page but applying CSS to the page make it presentable. The name cascading specifies the scheme to determine which style rule applies is more than one rule matches a particular element. Style sheet consists of a list of rules which includes one or more selectors and a declaration block.

You Might Like This:

Selectors:

Selectors declare the part which part of the markup a style applies by matching the attributes and tags.

Declaration Block:

Declaration block consists of a declaration in braces. Each declaration has a property, colon(:) and a value. For multiple declarations a semi-colon(;) is must as a separation. Properties are specified in CSS Standard and have a set of values to it. Values can be “center” or “inherit”, or numerical values, such as 200px (200 pixels), 50vw (50 percent of the viewport width) or 80% (80 percent of the window width).

Using CSS we have converted our black and white Tip Calculator tool into a presentable and attractive Tip Calculator.

CSS Output

Tip Calculator in HTML, CSS, JAVASCRIPT2

JavaScript Code

//Calculate Tip

function calculateTip() {
  //getElementById() method returns the element value with specified ID

  var billAmt = document.getElementById("billAmt").value;

  var servicequality = document.getElementById("servicequality").value;

  var tipTotal = document.getElementById("tipTotal").value;

  var billTotal = document.getElementById("billTotal").value;

  //Tip Calculation

  var total = billAmt * servicequality; //For Tip Calculation

  var Total = parseFloat(billAmt) + parseFloat(total); //For Total bill amount calculation

  //Display  Tip

  document.getElementById("tipTotal").innerHTML = total;

  //Display Total

  document.getElementById("billTotal").innerHTML = Total;
}

//Click to call function

document.getElementById("calculate").onclick = function () {
  calculateTip();
};

Javascript also abbreviated as JS is a weekly typed, prototyped based and multi-paradigm programming language. It is one of the important languages in the trio (HTML, CSS, JavaScript) that all developers need to learn.

1- HTML for defining the web page content.

2- CSS to convert the web page into an attractive web page.

3- JS to program the behavior of web pages.

The logical implementation of our tool is done with the help of JavaScript. Now your ‘Tip Calculator’ is ready to use. Hope this article helped! To learn to build more complex projects using these languages and to become a professional web developer

Final Output 

Tip Calculator in HTML, CSS, JAVASCRIPT5
Tip Calculator in HTML, CSS, JAVASCRIPT5

Source code 

If you enjoyed reading this Tip Calculator in HTML, CSS, JAVASCRIPT post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.

if you have any confusion Regarding Tip Calculator Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

written by – Ninja_webTech

Share on:

Leave a Comment