Simple calculator in Lightning Webcomponent

simplecalculator.html
======================
<template>
    <lightning-input label="Number1" name="number1" onchange={handleEvent}>
    </lightning-input>
    <lightning-input label="Number2" name="number2" onchange={handleEvent}>
    </lightning-input>
    <br/>
    <lightning-button label="Add" variant="brand"  onclick={doAdd}>
    </lightning-button>&nbsp;
    <lightning-button label="Sub" variant="brand"  onclick={doSub}>
    </lightning-button>&nbsp;
    <lightning-button label="mul" variant="brand"  onclick={doMul}>
    </lightning-button>&nbsp;
    <lightning-button label="div" variant="brand"  onclick={doDiv}>
    </lightning-button>
</template>

simplecalculator.js
===================
import { LightningElement,track } from 'lwc';
export default class SimpleCalculator extends LightningElement
{
    number1;
    number2;
    handleEvent(event)
    {
        const val=event.target.value;
        const name=event.target.name;
        if(name==='number1')
        {
            this.number1=val;
        }
        else
        {
            this.number2=val;
        }
    }
    doAdd()
    {
        const result=parseInt(this.number1)+parseInt(this.number2);
        console.log('******Result is*****'+result);
    }
    doSub()
    {
        const result=parseInt(this.number1)-parseInt(this.number2);
        console.log('******Result is*****'+result);
    }
    doMul()
    {
        const  result=parseInt(this.number1)*parseInt(this.number2);
        console.log('******Result is*****'+result);
    }
    doDiv()
    {
        const result=parseInt(this.number1)/parseInt(this.number2);
        console.log('******Result is*****'+result);
    }

}

LightningApplication
====================
<aura:application extends="force:slds">
    <c:simpleCalculator/>
</aura:application>





Comments