Basic Calculator in LWC

In this blog post, I am creating a sample LWC component calculator.

And I am doing below 4 actions

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

blog refrence https://jayakrishnasfdc.wordpress.com/2020/12/05/create-calculator-in-lwc/

basiccalculator.html

<template>

    <lightning-card  title="Basic Calculator In LWC"> <!-- Khumed Khatib -->

        <div class="slds-p-around_small">

            <lightning-input label = "Enter Number 1" name = "value1"

type = "Number" value = {num1}

            onchange={InputChangeHandler}></lightning-input>

            <lightning-input label = "Enter Number 2" name = "value2"  

type = "Number" value = {num2}

            onchange={InputChangeHandler}></lightning-input>

        </div>

        <div class="slds-m-top_small slds-m-bottom_medium ">

             <b>Result = {result}</b>

        </div>

        <div class="slds-m-top_small slds-m-bottom_medium">

            <lightning-button variant="Brand" label="Addition" onclick={handleClick}

class="slds-m-left_x-small">

            </lightning-button>

            <lightning-button variant="Brand" label="Substract" onclick={handleClick}

class="slds-m-left_x-small">

            </lightning-button>

            <lightning-button variant="Brand" label="Multiply" onclick={handleClick}

class="slds-m-left_x-small">

            </lightning-button>

            <lightning-button variant="Brand" label="Divide" onclick={handleClick}

class="slds-m-left_x-small">

            </lightning-button>

        </div>

    </lightning-card>

</template>

basiccalculator.js

export default class BasicCalculator extends LightningElement {

    @track result;

    num1;

    num2;

    InputChangeHandler(event){

        const name = event.target.name;

        if(name === 'value1'){

            this.num1 = event.target.value;

        }else if(name === 'value2'){

            this.num2 = event.target.value;

        }

    }

    handleClick(event){

        debugger;

        const mathoperator = event.target.label;

        const numb1 = parseInt(this.num1, 10);

        const numb2 = parseInt(this.num2, 10);

        var resulttemp = 0;

        if(mathoperator === 'Addition'){

            resulttemp = numb1 + numb2;

        }else if(mathoperator === 'Substract'){

            resulttemp = numb1 - numb2;

        }else if(mathoperator === 'Multiply'){

            resulttemp = numb1 * numb2;;

        }else if(mathoperator === 'Divide'){

            resulttemp = numb1 / numb2;;

        }

       

        this.result = resulttemp;

    }

}

basiccalculator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>                                                            

                                                                                               

Happy Coding Sharing is caring