Create Calculator Using Lightning Web Component(LWC)

Simple LWC Calculator

In this we are going to see how to create or build simple lightning web component calculator  with functions like 

• How to add two numbers in Lwc.
• How to subtract two numbers in Lwc. 
• Division of two numbers in Lwc.
• Multiplication of two numbers in Lwc.

Steps to create Lightning Web Component Calculator

Step1 : Create New Lightning Web component with name: calculatorInLwc.

calculatorInLwc.html

 <template>  
    <div class="slds-box slds-theme_shade">  
     <lightning-input type="number" name="input2" label="Number 1" onchange={handleNumberOeChange} value={firstNumber}></lightning-input>  
     <lightning-input type="number" name="input2" label="Number 2" onchange={handleNumberTwoChange} value={secondNumber}></lightning-input>  
   </div>  
   <div class="slds-box slds-theme_shade">  
     <b>Output value is : </b>  
      <P>{resultValue}</p>  
   </div>  
    <div class="slds-box slds-theme_shade">  
     <lightning-button label="Addition" onclick={addition}> </lightning-button>  
     <lightning-button label="Multification" onclick={multification}> </lightning-button>  
     <lightning-button label="Subtraction" onclick={subtraction}> </lightning-button>  
     <lightning-button label="Divison" onclick={division}> </lightning-button>  
    </div>  
 </template>  

calculatorInLwc.js

import { LightningElement, track } from 'lwc';
export default class CalculatorInLwc extends LightningElement {
    @track firstNumber;
    @track secondNumber;
    resultValue;
    handleNumberOeChange(event) {
        this.firstNumber = parseInt(event.target.value);
    }
    handleNumberTwoChange(event) {
        this.secondNumber = parseInt(event.target.value);
    }
    addition() {
        this.resultValue = parseInt(this.firstNumber) + parseInt(this.secondNumber);
    }
    multification() {
        this.resultValue = this.firstNumber * this.secondNumber;
    }
    subtraction() {
        this.resultValue = this.firstNumber - this.secondNumber;
    }
    division() {
        this.resultValue = this.firstNumber / this.secondNumber;
    }
}

Step2: Add this lwc component to lightning page.

Add calculator Lightning web competent to lightning page in app builder.

Output:

Subjects:

Lightning Web Components Lightning Web Components Basics LWC LWC Basics LWC code

Share This: