Skip to main content

Filter any report by current Logged In User in Salesforce | Salesforce Tutorials | Salesforce Development

Tip Calculator in Lightning Component Salesforce

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 



Comments

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
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<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …

Modal Popup in Lightning Component Salesforce

How to display modal popup on button's click in Lightning Component ?  To display modal popup in your component first create a button in your Component which will be used to show & hide modal popup.  
1 2 3 4<lightning:button variant="brand" label="Click to Open" title="Click to Open" onclick="{!c.showModel}"/> After that lets add a boolean type attribute above button tag to storeTrue & False value.1<aura:attribute name="showModal" type="boolean"default="false"/>
Copy and paste below code after button in your 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 32 33 34 35<aura:if isTrue="{!v.showModal}"><section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby=…