Simple Tip Calculator in VueJS

A Tip Calculator is a calculator that calculates a tip based on the percentage of the total bill.

Let’s build a simple Tip Calculator using VueJS

Here is the HTML

<h2> Tip Calculator </h2>
<form>
    <div class="form-group">
        <label for="name">How much is the total Bill Amount?</label>
        <input type="text" class="form-control" id="amount" placeholder="Total Bill Amount" v-model="amount">
    </div>
    <div class="form-group">
        <label for="email">How was the service?</label>
        <select name="refer" class="form-control" id="percentage" v-model="percentage">
            <option value="30">30% (Exceptional)</option>
            <option value="25">25% (More than good)</option>
            <option value="20" selected>20% (Good)</option>
            <option value="15">15% (It was okay)</option>
            <option value="10">10% (Bad)</option>
            <option value="5">5% (Terrible)</option>
        </select>
    </div>
    <div class="form-group">
        <label for="name">How many people are sharing the bill?</label>
        <input type="number" class="form-control" id="people" placeholder="Number of people" v-model="people">
    </div>
</form>
<div class="alert alert-success" role="alert">
    Tip Amount : <strong>{{tip.toFixed(2)}}</strong>
</div>

We have created three input fields, one for total Bill Amount another for the percentage of the total amount as the tip, and third for how many people are sharing the amount.

Here is the Vue Instance that binds the properties to input fields and also a computed property that calculates the total bill amount


var app = new Vue({
    el: '#app',
    data: {
        amount: 0,
        percentage: 20,
        people: 1
    },
    computed: {
        tip(){
            this.people = (!isNaN(this.people) && this.people > 0) ? this.people : 1; //Restrict people to not be NaN or 0
            return this.amount > 0 ? (this.amount * this.percentage / 100) / this.people : 0;  //Calculate Tip if valid bill amount
        }
    }
});

Tip Calculator Demo

Related Articles

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Leave a reply:

    Your email address will not be published.

    Site Footer