Tip Calculator in Lightning Component Salesforce

Kapil August 16, 2020

In this blog you will learn to create a Tip calculator for Restaurants or Bars in Lightning Component Salesforce.

I will share complete code here, you can modify it as per your requirement. Please check the code below : 

Component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="totalAmount" type="Double" />
    <aura:attribute name="tip" type="Double" />
    <aura:attribute name="people" type="Double" />
    <aura:attribute name="split" type="String" />
    <div style="max-width:500px; padding:10px">
        <br/>
        <div style="background-color:#ffff00; border:1px solid black;border-radius:25px 25px 0px 0px">
            <p style="font-size:30px; font-weight:bold; padding:10px">Tip Calculator</p>
        </div>
        <div style="border:1px solid black; padding:10px; background-color: white">
            <lightning:input type="number" aura:id="totalAmount" label="$ Total bill amount ?" value="{!v.totalAmount}" required="true"/>
            <br/>
            <lightning:select aura:id="tip" label="How was the service?" required="true" value="{!v.tip}">
                <option value="">choose one...</option>
                <option value="30">Very Good</option>
                <option value="20">Good</option>
                <option value="10">Average</option>
                <option value="5">Not Good</option>
            </lightning:select>
            <br/>
            <lightning:input type="number" aura:id="people" label="Number of People" value="{!v.people}" />
            <br/>
            <lightning:button variant="success" label="Calculate" title="Success" onclick="{! c.handleClick }"/>
            <br/>
            <br/>
           <p style="font-size:20px">{!v.split}</p> 
            <br/>
        </div>
    </div>
</aura:component>


Controller 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
({
	handleClick : function(component, event, helper) {
		var total = component.get("v.totalAmount");
        var tip = component.get("v.tip");
        var person = component.get("v.people");
        var tips = ((total*tip)/100);
        var totalWithTip = parseFloat(total)+parseFloat(tips);
        var amountPerPerson = parseFloat(totalWithTip)/parseFloat(person);
        var split = 'Tip : '+tips + ' $ -- Split Amount : '+ amountPerPerson+' $ ';
        component.set("v.split",split);
    }
})


Checkout the video tutorial below


If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 



Tags:

Post a Comment

0 Comments