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
        }
    }
});

[WP-Coder id="17"]