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>
<lightning-button label="Sub" variant="brand" onclick={doSub}>
</lightning-button>
<lightning-button label="mul" variant="brand" onclick={doMul}>
</lightning-button>
<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>
======================
<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>
<lightning-button label="Sub" variant="brand" onclick={doSub}>
</lightning-button>
<lightning-button label="mul" variant="brand" onclick={doMul}>
</lightning-button>
<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
Post a Comment