Sample Calculator In LWC
In this LWC scenario, We are going to work on building a sample calculator in LWC. This scenario include topics like event handling, lightning input, lightning button etc.
This problem statement has been designed for developer who has intermediate skills in Lightning Web Component.
Create a Lightning Web Component which can be placed in a Lightning App Page where users can do quick calculations like Addition, Subtraction, Multiplication & Division.
Requirement
- You have to create two component. The first component will have two input field of type number
- Second Component will call the first component
- Second component will have 4 buttons – Add, Subtract, Multiply & Divide
- If user clicks on Add button, It should add two values entered by user in two input fields
- If user clicks on Subtract button, It should subtract two values entered by user in two input fields
- If user clicks on Multiply button, It should add multiply values entered by user in two input fields
- If user clicks on Divide button, It should divide two values entered by user in two input fields
- The result should be displayed in read only input field
Do you need help?
Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.
GET IN TOUCH
Schedule a 1:1 Meeting with me
Do not forget to paste your code in comment. It would help others in case they get stuck. Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.
ParentCalculator.html
=================================================================
ParentCalculator.js
=================================================================
import { LightningElement } from ‘lwc’;
export default class ParentCalculator extends LightningElement {
firstNumber;
secondNumber;
value=”
onchangeHandler(event){
let inputs = this.template.querySelectorAll(‘lightning-input’);
inputs.forEach((element)=>{
if(element.name===’firstN’){
this.firstNumber = element.value;
}else if(element.name===’secondN’){
this.secondNumber = element.value;
}
});
}
handleButtonClick(event){
let buttonPressed = event.detail;
if(buttonPressed == ‘add’)
this.add();
else if(buttonPressed == ‘sub’)
this.sub();
else if(buttonPressed == ‘mul’)
this.mul();
else
this.div();
}
add(){
this.value=Number(this.firstNumber) + Number(this.secondNumber);
}
sub(){
this.value=this.firstNumber-this.secondNumber;
}
mul(){
this.value=this.firstNumber*this.secondNumber;
}
div(){
this.value=Number(this.firstNumber) / Number(this.secondNumber);
}
}
ChildCalculator.html
=================================================================
ChildCalculator.js
=================================================================
import { LightningElement } from ‘lwc’;
export default class ChildCalculator extends LightningElement {
onclickHandler(event){
console.log(‘evt : ‘,event.target.dataset.id);
if(event.target.dataset.id==’add’){
this.createCustomEvent(event.target.dataset.id);
}else if(event.target.dataset.id==’sub’){
this.createCustomEvent(event.target.dataset.id);
}else if(event.target.dataset.id==’mul’){
this.createCustomEvent(event.target.dataset.id);
}else if(event.target.dataset.id==’div’){
this.createCustomEvent(event.target.dataset.id);
}
}
createCustomEvent(buttonType){
let evt = new CustomEvent(‘buttonpress’,{
detail : buttonType
})
console.log(‘evt : ‘,evt);
this.dispatchEvent(evt);
}
}
import { LightningElement } from ‘lwc’;
export default class CalculatorCopmTwo extends LightningElement {
handleClick(event){
const calType = event.target.label;
this.dispatchEvent(
new CustomEvent(‘childclick’,{
detail: calType
})
);
}
}
Calculated Result is {result}
import { LightningElement,track } from ‘lwc’;
import {ShowToastEvent} from ‘lightning/platformShowToastEvent’;
export default class CalculatorCompOne extends LightningElement {
@track num1 = 0;
@track num2 = 0;
@track result = 0;
handleChange(event){
const field = event.target.dataset.name;
if(field === ‘number1’){
this.num1 = event.target.value;
}
else if(field === ‘number2’){
this.num2 = event.target.value;
}
}
parentHandle(event){
console.log(‘entering into the event handler’);
const evtType = event.detail.toLowerCase();
const calResult = this.calculationHandle(evtType,this.num1,this.num2);
console.log(‘result====’+calResult);
this.result = calResult;
this.dispatchEvent(
new ShowToastEvent({
title: ‘Calculator App’,
message: ‘Calculated value’+this.result,
variant: ‘success’
}
)
);
}
calculationHandle(type,num1,num2){
const parsedNum1 = parseInt(num1, 10);
const parsedNum2 = parseInt(num2, 10);
switch (type) {
case ‘add’: return parsedNum1 + parsedNum2;
case ‘sub’: return parsedNum1 – parsedNum2;
case ‘mul’: return parsedNum1 * parsedNum2;
case ‘div’: return parsedNum1 / parsedNum2;
default: return null;
}
}
}