Calculator Using Salesforce Lightning Components

Requirement : ‹ ›
Create a Lightning Component having two input fields which will take two number as input and show result. Addition, Subtraction, Multiplication and Division  happen on button click.
Or
In other words , create a Calculator Lightning Component.

cmpCalculator.cmp

<aura:component >
 
    <aura:attribute name="firstNumber" type="Integer" />
    <aura:attribute name="secondNumber" type="Integer" />
    <aura:attribute name="result" type="Integer" />
    <aura:attribute name="isAdd" type="Boolean" default="false"/>
    <aura:attribute name="isSub" type="Boolean" default="false"/>
    <aura:attribute name="isMul" type="Boolean" default="false"/>
    <aura:attribute name="isDiv" type="Boolean" default="false"/>
    <aura:attribute name="isRefresh" type="Boolean" default="false"/>
 
    <div style="width: 485px;margin-left:20px;">
     
        <lightning:input label="First Number" value="{!v.firstNumber}"/>
        <lightning:input label="Second Number" value="{!v.secondNumber}"/>
     
        <br/>
     
        <lightning:button label="Addition" onclick="{!c.doAddition}"/>
        <lightning:button label="Subtraction" onclick="{!c.doSubtraction}"/>
        <lightning:button label="Multiplication" onclick="{!c.doMultiplication}"/>
        <lightning:button label="Division" onclick="{!c.doDivision}"/>
     
        <aura:if isTrue="{!v.isRefresh}">
            <lightning:button label="Refresh" onclick="{!c.doRefresh}"/>
        </aura:if>
     
        <br/><br/>
        <aura:if isTrue="{!v.isAdd}">
            Addition of two number is : {!v.result}     
        </aura:if>
     
        <aura:if isTrue="{!v.isSub}">
            Subtraction of two number is : {!v.result}     
        </aura:if>
     
        <aura:if isTrue="{!v.isMul}">
            Multiplication of two number is : {!v.result}     
        </aura:if>
     
        <aura:if isTrue="{!v.isDiv}">
            Division of two number is : {!v.result}     
        </aura:if>
     
    </div>
 
</aura:component>

cmpCalculator.js

({
 
doAddition : function(component, event, helper) {
     
var fNumber = component.get('v.firstNumber');
        var sNumber = component.get('v.secondNumber');
     
        var addition = parseInt(fNumber) + parseInt(sNumber);
     
        component.set('v.result' , addition);
        component.set('v.isAdd' , true);
        component.set('v.isRefresh' , true);
        component.set('v.isSub' , false);
        component.set('v.isMul' , false);
        component.set('v.isDiv' , false);     
},
 
    doSubtraction : function(component, event, helper) {
     
var fNumber = component.get('v.firstNumber');
        var sNumber = component.get('v.secondNumber');
     
        var subtraction = parseInt(fNumber) - parseInt(sNumber);
     
        component.set('v.result' , subtraction);
        component.set('v.isAdd' , false);
        component.set('v.isSub' , true);
        component.set('v.isRefresh' , true);
        component.set('v.isMul' , false);
        component.set('v.isDiv' , false);     
},
 
    doMultiplication : function(component, event, helper) {
     
var fNumber = component.get('v.firstNumber');
        var sNumber = component.get('v.secondNumber');
     
        var multiplication = parseInt(fNumber) * parseInt(sNumber);
     
        component.set('v.result' , multiplication);
        component.set('v.isAdd' , false);
        component.set('v.isSub' , false);
        component.set('v.isMul' , true);
        component.set('v.isRefresh' , true);
        component.set('v.isDiv' , false);     
},
 
    doDivision : function(component, event, helper) {
     
var fNumber = component.get('v.firstNumber');
        var sNumber = component.get('v.secondNumber');
     
        var division = parseInt(fNumber) / parseInt(sNumber);
     
        component.set('v.result' , division);
        component.set('v.isAdd' , false);
        component.set('v.isSub' , false);
        component.set('v.isMul' , false);
        component.set('v.isDiv' , true);
        component.set('v.isRefresh' , true);
},
 
    doRefresh : function(component, event, helper) {
     
        component.set('v.firstNumber' , '');
        component.set('v.secondNumber' , '');
        component.set('v.isAdd' , false);
        component.set('v.isSub' , false);
        component.set('v.isMul' , false);
        component.set('v.isDiv' , false); 
        component.set('v.isRefresh' , false); 
}         
})

Output:

Other Useful Blog
Lightning Web Component

Happy Learning !!