Create a simple calculator using lwc and commonUtils class
calculator.html
<template>
<lightning-card title="Calculator Example">
Calculated value: {results}
<lightning-input type="number" label="Enter first value" name="firstval" onchange={handleChange}></lightning-input>
<lightning-input type="number" label="Enter second value" name="secondval" onchange={handleChange}></lightning-input>
<br />
<lightning-button-group>
<lightning-button label="Add" icon-name="utility:add" onclick={handleAddition}></lightning-button>
<lightning-button label="Subtract" onclick={handleSubtraction}></lightning-button>
<lightning-button label="Multiply" onclick={handleMultiply}></lightning-button>
</lightning-button-group>
</lightning-card>
</template>
calculator.js
import { LightningElement, track } from 'lwc';
import { addition, subtraction, multiplication } from 'c/commonUtils';
export default class Calculator extends LightningElement {
@track firstvalue = 0;
@track secondvalue = 0;
@track results = 0;
handleChange(event){
if(event.target.name === "firstval"){
this.firstvalue = event.target.value;
}else if(event.target.name === "secondval"){
this.secondvalue = event.target.value;
}
}
handleAddition(event){
this.results = addition( parseInt(this.firstvalue), parseInt(this.secondvalue));
}
handleSubtraction(event){
this.results = subtraction( parseInt(this.firstvalue), parseInt(this.secondvalue));
}
handleMultiply(event){
this.results = multiplication( parseInt(this.firstvalue), parseInt(this.secondvalue));
}
}
calculator.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
commonUtils.js
const addition = (firstval, secondval) => {
if(firstval && secondval > 0){
return firstval + secondval;
}
return 0;
};
const subtraction = (firstval, secondval) => {
if(firstval && secondval > 0){
return firstval - secondval;
}
return 0;
};
export function multiplication(firstval, secondval){
return firstval * secondval;
};
export { addition, subtraction };
