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

On this tutorial, we are going to cowl learn how to create a easy tip calculator with HTML, CSS, and JavaScript.

The tip calculator will assist you to enter an quantity, select a tip proportion, and select the variety of individuals sharing the invoice. It’ll then calculate the tip contribution per individual. 

HTML Construction

The construction will function a easy interface consisting of the next parts:

  • An enter ingredient to enter the quantity
  • 4 tip choices to select from
  • An enter ingredient for a quantity worth
  • A calculate button for computation when clicked
  • A component to show the output.
  • All these enter parts will probably be wrapped inside a kind
1
<div class="container">
2
  <h1>Tip Calculator</h1>
3
  <kind motion="">
4
    <part class="total-bill">
5
      <h2>Complete invoice quantity</h2>
6
      <enter kind="numbrt" placeholder="0.00" id="quantity" worth="" required />
7
    </part>
8
    <part class="select-tip">
9
      <h2>Select Tip</h2>
10
      <div class="radio-group">
11
        <enter kind="radio" id="5" identify="proportion" worth="5" />
12
        <label for="5">
13
          <span> 5%</span>
14
        </label>
15
        <enter kind="radio" id="10" identify="proportion" worth="10" checked />
16
        <label for="10">
17
          <span> 10%</span>
18
        </label>
19
        <enter kind="radio" id="15" identify="proportion" worth="15" />
20
        <label for="15">
21
          <span>15%</span>
22
        </label>
23
        <enter kind="radio" id="20" identify="proportion" worth="20" />
24
        <label for="20">
25
          <span>20%</span>
26
        </label>
27
      </div>
28
    </part>
29
    <part class="individuals">
30
      <h2>Variety of Individuals sharing</h2>
31
      <enter kind="quantity" placeholder="1" worth="2" id="individuals" required />
32
    </part>
33
    <part class="submit-form">
34
      <button class="calculate-btn">Calculate</button>
35
      <div class="final-bill">
36
        <p id="tip">Tip Per Individual: $0</p>
37
    </part>
38
  </kind>
39
</div>

CSS Types

Step one is to outline our international types.

1
@import url('https://fonts.googleapis.com/css2?household=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&show=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
}

Subsequent, add the next types to the physique of the web page.

1
physique {
2
  background: var(--grey);
3
  shade: var(--black);
4
  show: flex;
5
  justify-content: middle;
6
  min-height: 100vh;
7
  font-family: "DM Mono", monospace;
8
  text-align: middle;
9
}

Set a width and a few padding to the enclosing container ingredient and the part parts.

1
.container {
2
  width: 400px;
3
  padding: 20px 0 50px 0;
4
}
5
part {
6
  margin: 20px 0 50px;
7
}
8


Let’s give each inputs the identical types to make sure consistency.

1
enter {
2
  width: 90%;
3
  top: 2em;
4
  font-size: 2em;
5
  box-sizing: border-box;
6
  text-align: finish;
7
  define: none;
8
  background: var(--white);
9
  padding: 5px;
10
  border-radius: var(--radius);
11
  border: 2px stable var(--darkgrey);
12
}

Slightly than utilizing a default radio button, let’s create {custom} radio buttons for choosing tip percentages. We wish our buttons to be sq. and with a border radius. We additionally need the proportion tip textual content displayed on the middle of the sq. button. 

First, let’s conceal the default spherical design for the radio buttons:

1
.radio-group enter[type="radio"] {
2
  show: none;
3
}

Let’s create our custom-styled radio buttons, which could have the next types:

1
.radio-group {
2
  show: flex;
3
  justify-content: space-around;
4
  align-items: middle;
5
  width: 100%;
6
}
7

8
.radio-group label::earlier than {
9
  text-align: middle;
10
  content material: "";
11
  show: inline-block;
12
  width: 60px;
13
  top: 50px;
14
  border: 2px stable var(--darkgrey);
15
  border-radius: var(--radius);
16
  left: 10%;
17
  high: 50%;
18
  remodel: translateY(-50%);
19
}

We’ve got used Flexbox to make sure the buttons are aligned horizontally and spaced equally. Use absolute positioning to make sure the labels are centered inside the {custom} buttons, and add a background shade when a button is chosen.

1
.radio-group label {
2
  show: inline-block;
3
  place: relative;
4
  cursor: pointer;
5
} 
6

7
.radio-group label span {
8
  place: absolute;
9
  left: 20px;
10
  high: -10px;
11
} 
12

13
.radio-group enter[type="radio"]:checked + label::earlier than {
14
  background-color: var(--green);
15
}

The calculate button could have the next types

1
.calculate-btn {
2
  background: var(--darkgreen);
3
  shade: #fff;
4
  border: none;
5
  border-radius: var(--radius);
6
  padding: 15px 30px;
7
  font-size: 2em;
8
}

Add the next types for the inline parts for the ultimate clear up.

1
h1 {
2
  font-size: 3em;
3
  margin: 50px 0;
4
}
5

6
h2 {
7
  margin: 0 0 20px;
8
}
9

10
part {
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 performance to make our Tip Calculator operate as anticipated. We are going to do the next.

  1. Add an occasion listener to the calculate button.
  2. When the button is clicked, it’ll invoke a operate known as calculateTip()
  3. The calculateTip() operate will get the values from all of the enter parts, carry out the computation, and show the tip per individual on the backside of the web page.

The ultimate code appears to be like like this:

1
const calculateBtn = doc.querySelector(".calculate-btn");
2

3
operate CalculateTip(e) {
4
  occasion.preventDefault();
5
  const tipMessage = doc.getElementById("tip");
6
  const quantity = doc.getElementById("quantity").worth;
7
  const tipPercentage = doc.querySelector('[name="percentage"]:checked')
8
    .worth;
9
  if (quantity === "") {
10
    alert("Please enter the quantity.");
11
    return;
12
  }
13

14
  const individuals = doc.getElementById("individuals").worth;
15
  const tip = (quantity * (tipPercentage / 100)) / individuals;
16
  
17
  tipMessage.innerHTML = `The Tip per individual is $${parseFloat(tip).toFixed(2)}`;
18
}
19

20
calculateBtn.addEventListener("click on", CalculateTip);

Right here is the ultimate consequence!

Conclusion

This tutorial has lined learn how to create a totally functioning tip calculator, which will probably be useful for the subsequent time you’re out with your mates!

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0