How to create a Calculator using LWC

Create a calculator using LWC : In this article we have created simple calculator using LWC and check the following on how to develop a calculator using Lightning Web Calculator? In our calculator we perform the following actions

  1. Addition
  2. Subtraction
  3. Multiplication
  4. Division

    Calculator.html

<template>
    <lightning-card title="Calculator from Jayakrishnasfdc" icon-name="standard:number_input">
        <div class="slds-p-around_small">
            <lightning-input label="First Number" type="number" name="Number1" value={num1}
                onchange={onInputChangeHandler} required></lightning-input><br>
            <lightning-input label="Second Number" type="number" name="Number2" value={num2}
                onchange={onInputChangeHandler} required></lightning-input><br>
            <lightning-layout horizontal-align="space">
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Add" variant="Brand" onclick={onButtonCLick}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Subtract" variant="Brand" onclick={onButtonCLick}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Multiply" variant="Brand" onclick={onButtonCLick}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Divide" variant="Brand" onclick={onButtonCLick}></lightning-button>
                </lightning-layout-item>
            </lightning-layout>
            Result = {result}
        </div>
    </lightning-card>
</template>

Calculator.js

import { LightningElement, track } from 'lwc';
export default class Calculator extends LightningElement {
    @track result;
    num1;
    num2;
    onInputChangeHandler(event) {
        const name = event.target.name;
        if (name === 'Number1') {
            this.num1 = event.target.value;
        } else if (name === 'Number2') {
            this.num2 = event.target.value;
        }
    }
    onButtonCLick(event) {
        var operation = event.target.label;
        if (!isNaN(this.num1) && !isNaN(this.num2)) {
            const numb1 = parseInt(this.num1, 10);
            const numb2 = parseInt(this.num2, 10);
            var tempResult = 0;
            if (operation === 'Add') {
                tempResult = `${numb1 + numb2}`;
            } else if (operation === 'Subtract') {
                tempResult = `${numb1 - numb2}`;
            } else if (operation === 'Multiply') {
                tempResult = `${numb1 * numb2}`;
            } else if (operation === 'Divide') {
                tempResult = `${numb1 / numb2}`;
            }
            if (tempResult !== null && tempResult !== '' && tempResult !== undefined && !isNaN(tempResult)) {
                this.result = tempResult;
            }
        }
    }
}

Note: event.target that it refers to the UI component which fired the event. So while referring if we want to refer to the UI Component’s Name we can use event.target.name, similarly to get the value we can use event.target.value and event.target.label to get label.
Output:

image 14