Create a Tip Calculator with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a tip calculator with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create tip-calculator

and select all the default options to create the project.

Create the Tip Calculator

To create the tip calculator, we write:

<template>
  <div>
    <form @submit.prevent="calculate">
      <fieldset>
        <label>subtotal</label>
        <input v-model.number="tip.subtotal" />
      </fieldset>

      <fieldset>
        <label>number of people sharing the bill</label>
        <input v-model.number="tip.numDiners" />
      </fieldset>

      <fieldset>
        <label>tip percentage</label>
        <select v-model.number="tip.tipPercentage">
          <option value="0">0%</option>
          <option value="0.05">5%</option>
          <option value="0.1">10%</option>
          <option value="0.15">15%</option>
          <option value="0.2">20%</option>
        </select>
      </fieldset>

      <button type="submit">Calculate</button>
    </form>

    <div v-if="result.total">
      <p>total: {{ result.total }}</p>
      <p>total per diner: {{ result.totalPerDiner }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tip: {
        subtotal: 0,
        numDiners: 0,
        tipPercentage: 0,
      },
      result: {},
    };
  },
  computed: {
    subtotalValid() {
      return +this.tip.subtotal >= 0;
    },
    numDinersValid() {
      return +this.tip.numDiners > 0;
    },
    tipPercentageValid() {
      return +this.tip.tipPercentage >= 0;
    },
  },
  methods: {
    calculate() {
      const { subtotalValid, numDinersValid, tipPercentageValid } = this;
      if (!subtotalValid || !numDinersValid || !tipPercentageValid) {
        return;
      }
      const { subtotal, numDiners, tipPercentage } = this.tip;
      const total = subtotal * (1 + tipPercentage);
      this.result = { total, totalPerDiner: total / numDiners };
    },
  },
};
</script>

The first input binds to the tip.subtotal reactive property, which has the subtotal before the tips.

v-model lets us binds the inputted value to the reactive property.

The number modifier lets us convert the inputted value to the number automatically.

Similarly, we have the ‘number of people sharing the bill’ field to enter the number of people that split the bill.

The 3rd field has the tip.tipPercentage property with the tip percentage.

To let users submit the form, we add a button with the type attribute set to submit to submit the form.

We have the @submit directive to let us run the calculate method to let us do the calculation.

The prevent modifier lets us prevent the default submit behavior, which lets us do client-side submissions instead of server-side.

The div below the form has the results.

We only display it if result.total is calculated.

In the component object, we have the data method that has the initial value of the tip reactive property.

result has the result object.

The calculate method lets us get all the values from the form and calculate the value.

First, we check for the validity of the values with the computed properties.

subtotalValid compares the subtotal to make sure it’s bigger than or equal to 0.

We do similar comparisons with the other 2 computed properties.

We calculate the total and the result.

This result is displayed in template.

Conclusion

We can create a tip calculator easily with Vue 3.