Step 1: Create a component with the name caluclator, once you save this it becomes caluclator.cmp
Step 2: Copy the below code and paste it in the component section of the bundle.
<aura:component >
<aura:attribute name="num1" type="Integer"/>
<aura:attribute name="num2" type="Integer"/>
<aura:attribute name="num3" type="Integer"/>
<ui:inputNumber label="Number 1" value="{!v.num1}" />
<ui:inputNumber label="Number 2" value="{!v.num2}" />
<aura:attribute name="addbo1" type="Boolean" default="false"/>
<aura:attribute name="subbo1" type="Boolean" default="false"/>
<aura:attribute name="mulbo1" type="Boolean" default="false"/>
<aura:attribute name="divbo1" type="Boolean" default="false"/>
<aura:attribute name="refreshbo1" type="Boolean" default="false"/>
<aura:if isTrue="{!v.addbo1}">
Addition of Two Numbers is : {!num3}
<ui:outputNumber value="{!v.num3}"/>
</aura:if>
<aura:if isTrue="{!v.subbo1}">
Substraction of Two Numbers is : {!num3}
<ui:outputNumber value="{!v.num3}"/>
</aura:if>
<aura:if isTrue="{!v.mulbo1}">
multiplication of Two Numbers is : {!num3}
<ui:outputNumber value="{!v.num3}"/>
</aura:if>
<aura:if isTrue="{!v.divbo1}">
Division of Two Numbers is : {!num3}
<ui:outputNumber value="{!v.num3}"/>
</aura:if>
<ui:button press="{!c.Add}" label="Addition" />
<aura:if isTrue="{!v.refreshbo1}">
<ui:button press="{!c.Refresh}" label="Refresh" />
</aura:if>
<ui:button press="{!c.Sub}" label="Substraction" />
<ui:button press="{!c.Mul}" label="Multiplication" />
<ui:button press="{!c.Div}" label="Division" />
</aura:component>
Step 3: copy the below code and paste it in the controller section of the bundle.
({
Add : function(component, event, helper) {
var num1=component.get("v.num1");
var num2=component.get("v.num2");
var num3=num1+num2;
component.set("v.num3", num3);
component.set("v.addbo1", true);
component.set("v.refreshbo1", true);
component.set("v.mulbo1", false);
component.set("v.subbo1", false);
component.set("v.divbo1", false);
},
Mul : function(component, event, helper) {
var num1=component.get("v.num1");
var num2=component.get("v.num2");
var num3=num1*num2;
component.set("v.num3", num3);
component.set("v.mulbo1", true);
component.set("v.refreshbo1", true);
component.set("v.divbo1", false);
component.set("v.subbo1", false);
component.set("v.addbo1", false);
},
Sub : function(component, event, helper) {
var num1=component.get("v.num1");
var num2=component.get("v.num2");
var num3=num1-num2;
component.set("v.num3", num3);
component.set("v.subbo1", true);
component.set("v.refreshbo1", true);
component.set("v.mulbo1", false);
component.set("v.divbo1", false);
component.set("v.addbo1", false);
},
Div : function(component, event, helper) {
var num1=component.get("v.num1");
var num2=component.get("v.num2");
var num3=num1/num2;
component.set("v.num3", num3);
component.set("v.divbo1", true);
component.set("v.refreshbo1", true);
component.set("v.mulbo1", false);
component.set("v.subbo1", false);
component.set("v.addbo1", false);
},
Refresh : function(component, event, helper) {
component.set("v.num1", 0);
component.set("v.num2", 0);
component.set("v.divbo1", false);
component.set("v.mulbo1", false);
component.set("v.subbo1", false);
component.set("v.addbo1", false);
component.set("v.refreshbo1", false);
}
})
Step 4: Save the component.
Step 5: Create a new lightning application and replace the code with the below code
<aura:application >
<c:caluclator />
</aura:application>
Step 6: Save the application and then click on preview.
