How to Create a Simple Tip Calculator with HTML, CSS, and Vanilla JavaScript

In this tutorial, we will cover how to create a simple tip calculator with HTML, CSS, and JavaScript.

The tip calculator will allow you to enter an amount, choose a tip percentage, and choose the number of people sharing the bill. It will then calculate the tip contribution per person. 

HTML Structure

The structure will feature a simple interface consisting of the following elements:

• An input element to enter the amount
• Four tip options to choose from
• An input element for a number value
• A calculate button for computation when clicked
• An element to display the output.
• All these input elements will be wrapped inside a form

1

<div class="container">

2

  <h1>Tip Calculator</h1>

3

  <form action="">

4

    <section class="total-bill">

5

      <h2>Total bill amount</h2>

6

      <input type="numbrt" placeholder="0.00" id="amount" value="" required />

7

    </section>

8

    <section class="select-tip">

9

      <h2>Choose Tip</h2>

10

      <div class="radio-group">

11

        <input type="radio" id="5" name="percentage" value="5" />

12

        <label for="5">

13

          <span> 5%</span>

14

        </label>

15

        <input type="radio" id="10" name="percentage" value="10" checked />

16

        <label for="10">

17

          <span> 10%</span>

18

        </label>

19

        <input type="radio" id="15" name="percentage" value="15" />

20

        <label for="15">

21

          <span>15%</span>

22

        </label>

23

        <input type="radio" id="20" name="percentage" value="20" />

24

        <label for="20">

25

          <span>20%</span>

26

        </label>

27

      </div>

28

    </section>

29

    <section class="people">

30

      <h2>Number of People sharing</h2>

31

      <input type="number" placeholder="1" value="2" id="people" required />

32

    </section>

33

    <section class="submit-form">

34

      <button class="calculate-btn">Calculate</button>

35

      <div class="final-bill">

36

        <p id="tip">Tip Per Person: $0</p>

37

    </section>

38

  </form>

39

</div>

CSS Styles

The first step is to define our global styles.

1

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

2

3

:root {

4

  --black: #2c2626;

5

  --darkgrey: #6a5959;

6

  --white: #ffffff;

7

  --green: #80ed99;

8

  --darkgreen: #24532f;

9

  --grey: #f0f0f0;

10

  --radius: 8px;

11

}

Next, add the following styles to the body of the page.

1

body {

2

  background: var(--grey);

3

  color: var(--black);

4

  display: flex;

5

  justify-content: center;

6

  min-height: 100vh;

7

  font-family: "DM Mono", monospace;

8

  text-align: center;

9

}

Set a width and some padding to the enclosing container element and the section elements.

1

.container {

2

  width: 400px;

3

  padding: 20px 0 50px 0;

4

}

5

section {

6

  margin: 20px 0 50px;

7

}

8

Let’s give both inputs the same styles to ensure consistency.

1

input {

2

  width: 90%;

3

  height: 2em;

4

  font-size: 2em;

5

  box-sizing: border-box;

6

  text-align: end;

7

  outline: none;

8

  background: var(--white);

9

  padding: 5px;

10

  border-radius: var(--radius);

11

  border: 2px solid var(--darkgrey);

12

}

Rather than using a default radio button, let’s create custom radio buttons for selecting tip percentages. We want our buttons to be square and with a border radius. We also want the percentage tip text displayed at the center of the square button. 

First, let’s hide the default round design for the radio buttons:

1

.radio-group input[type="radio"] {

2

  display: none;

3

}

Let’s create our custom-styled radio buttons, which will have the following styles:

1

.radio-group {

2

  display: flex;

3

  justify-content: space-around;

4

  align-items: center;

5

  width: 100%;

6

}

7

8

.radio-group label::before {

9

  text-align: center;

10

  content: "";

11

  display: inline-block;

12

  width: 60px;

13

  height: 50px;

14

  border: 2px solid var(--darkgrey);

15

  border-radius: var(--radius);

16

  left: 10%;

17

  top: 50%;

18

  transform: translateY(-50%);

19

}

We have used Flexbox to ensure the buttons are aligned horizontally and spaced equally. Use absolute positioning to ensure the labels are centered within the custom buttons, and add a background color when a button is selected.

1

.radio-group label {

2

  display: inline-block;

3

  position: relative;

4

  cursor: pointer;

5

} 

6

7

.radio-group label span {

8

  position: absolute;

9

  left: 20px;

10

  top: -10px;

11

} 

12

13

.radio-group input[type="radio"]:checked + label::before {

14

  background-color: var(--green);

15

}

The calculate button will have the following styles

1

.calculate-btn {

2

  background: var(--darkgreen);

3

  color: #fff;

4

  border: none;

5

  border-radius: var(--radius);

6

  padding: 15px 30px;

7

  font-size: 2em;

8

}

Add the following styles for the inline elements for the final clean up.

1

h1 {

2

  font-size: 3em;

3

  margin: 50px 0;

4

}

5

6

h2 {

7

  margin: 0 0 20px;

8

}

9

10

section {

11

  margin: 20px 0 50px;

12

}

13

.final-bill p {

14

  font-size: 1.5em;

15

}

Making it Work With JavaScript

Let’s add the JavaScript functionality to make our Tip Calculator function as expected. We will do the following.

1. Add an event listener to the calculate button.
2. When the button is clicked, it will invoke a function called calculateTip()
3. The calculateTip() function will get the values from all the input elements, perform the computation, and display the tip per person at the bottom of the page.

The final code looks like this:

1

const calculateBtn = document.querySelector(".calculate-btn");

2

3

function CalculateTip(e) {

4

  event.preventDefault();

5

  const tipMessage = document.getElementById("tip");

6

  const amount = document.getElementById("amount").value;

7

  const tipPercentage = document.querySelector('[name="percentage"]:checked')

8

    .value;

9

  if (amount === "") {

10

    alert("Please enter the amount.");

11

    return;

12

  }

13

14

  const people = document.getElementById("people").value;

15

  const tip = (amount * (tipPercentage / 100)) / people;

16

17

  tipMessage.innerHTML = `The Tip per person is $${parseFloat(tip).toFixed(2)}`;

18

}

19

20

calculateBtn.addEventListener("click", CalculateTip);

Here is the final result!

Conclusion

This tutorial has covered how to create a fully functioning tip calculator, which will be helpful for the next time you are out with your friends!