# Design a Tip Calculator using HTML, CSS and JavaScript

• Difficulty Level : Medium
• Last Updated : 21 Sep, 2021

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.

Approach:

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 using the console.log() function.

Total is basically amount multiplied by type of service divided by a number of persons.

Using HTML we are giving desired structure, option for the input, and submit button. With the help of CSS, we are beautifying our structure by giving colors and desired font, etc.

In the JavaScript section, we are processing the taken input and after calculating, the respective output is printed.

Example:

Filename: index.html

## HTML

 `<``html``>` `<``head``>``    ``<``link` `rel``=``"stylesheet"` `href``=``"style.css"``>``    ``<``script` `type``=``"text/javascript"` `src``=``"app.js"``>``      ````` `<``body``>``    ``<``div` `class``=``"container"``>``        ``<``h1``>TIP CALCULATOR``        ``<``div` `class``=``"wrapper"``>``            `   `<``p``>Bill Amount`   `            ``<``input` `type``=``"text"` `id``=``"amount"``                   ``placeholder``=``"Amount to be paid"``> ₹` `            `   `<``p``>How was the service ?`   `            ``<``select` `id``=``"services"``>``                ``<``option` `selected disabled hidden>``                    ``Select``                ````                ``<``option` `value``=``"0.25"``>25% - Top Notch``                ``<``option` `value``=``"0.20"``>20% - Excellent``                ``<``option` `value``=``"0.15"``>15% - Good``                ``<``option` `value``=``"0.10"``>10% - Bad``                ``<``option` `value``=``"0.05"``>5% - Worst``            ``` `            `   `<``p``>Total number of persons`   `            ``<``input` `type``=``"text"` `id``=``"persons"``                ``placeholder``=``"Number of people sharing the bill"``>``            ``<``button` `id``=``"calculate"``>Calculate``        ``` `        ``<``div` `class``=``"tip"``>``            `   `<``p``>Tip Amount`   `            ``<``span` `id``=``"total"``>0₹``            ``<``span` `id``=``"each"``>each``        ````    ````` ``

Filename: style.css

## 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``;``}`

Filename: app.js

## 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;``}`

Complete code:

## HTML

 `<``html``>` `<``head``>``    ``<``style``>``        ``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;``        ``}``    ````` `<``body``>``    ``<``div` `class``=``"container"``>``        ``<``h1``>TIP CALCULATOR``        ``<``div` `class``=``"wrapper"``>``            `   `<``p``>Bill Amount`   `            ``<``input` `type``=``"text"``                   ``id``=``"amount"``                   ``placeholder``=``"Amount to be paid"``> ₹` `            `   `<``p``>How was the service ?`   `            ``<``select` `id``=``"services"``>``                ``<``option` `selected disabled hidden>Select``                ``<``option` `value``=``"0.25"``>25% - Top Notch``                ``<``option` `value``=``"0.20"``>20% - Excellent``                ``<``option` `value``=``"0.15"``>15% - Good``                ``<``option` `value``=``"0.10"``>10% - Bad``                ``<``option` `value``=``"0.05"``>5% - Worst``            ``` `            `   `<``p``>Total number of persons`   `            ``<``input` `type``=``"text"``                   ``id``=``"persons"``                   ``placeholder``=``"Number of people sharing the bill"``>``            ``<``button` `id``=``"calculate"``>Calculate``        ``` `        ``<``div` `class``=``"tip"``>``            `   `<``p``>Tip Amount`   `            ``<``span` `id``=``"total"``>0₹``            ``<``span` `id``=``"each"``>each``        ````    ````    ``<``script``>``        ``//the function called when Calculate button is clicked.``        ``window.onload = () =>``            ``{``                ``/*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;``        ``}``    ````` ``

Output:

My Personal Notes arrow_drop_up