How to create a Simple calculator using LWC?
Step 1: Create an HTML file.
SimpleCalculator.html:
<template>
<div class="slds-m-around_small" style="display: inline-block">
<lightning-card title="Calculator">
<div>
<lightning-input
value={calculationValues}
label="Calculator Expression"
name="txtExpression"
readonly>
</lightning-input>
</div>
<div>
<lightning-input
value={showResult}
label="Result"
name="txtResult"
readonly>
</lightning-input>
</div>
<div style="display: inline-block">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr class="slds-line-height_reset">
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="1"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="2"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="3"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand"
label="+"
onclick={handleClick}
></lightning-button>
</div>
</td>
</tr>
<tr class="slds-line-height_reset">
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="4"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="5"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="6"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand"
label="-"
onclick={handleClick}
></lightning-button>
</div>
</td>
</tr>
<tr class="slds-line-height_reset">
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="7"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="8"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="9"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand"
label="*"
onclick={handleClick}
></lightning-button>
</div>
</td>
</tr>
<tr class="slds-line-height_reset">
<td>
<div class="slds-truncate">
<lightning-button
variant="destructive-text"
label="Clear"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand-outline"
label="0"
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="success"
label="="
onclick={handleClick}
></lightning-button>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-button
variant="brand"
label="/"
onclick={handleClick}
></lightning-button>
</div>
</td>
</tr>
</table>
</div>
</lightning-card>
</div>
</template>
SimpleCalculator.js:
import { LightningElement } from 'lwc';
export default class SimpleCalculator extends LightningElement {
result = '';
calculationValues = '';
clearExpression = false;
previousOperator = '';
operations = {
current: 0,
'=': function(){
return this.current;
},
'+': function(n){
this.current += parseInt(n);
return this;
},
'-': function(n){
this.current -= parseInt(n);
return this;
},
'*': function(n){
this.current *= parseInt(n);
return this;
},
'/': function(n){
this.current /= parseInt(n);
return this;
}
}
get showResult(){
return this.operations.current;
}
handleClick(event){
if (this.clearExpression){
this.calculationValues = '';
this.result = '';
this.operations.current = 0;
this.clearExpression = false;
}
this.calculationValues = this.calculationValues + event.target.label;
if (event.target.label === "Clear"){
this.result = '';
this.calculationValues = '';
this.operations.current = 0;
}
else if (event.target.label === "+"){
if (this.operations.current === 0)
{
this.operations.current = parseInt(this.result);
}
else{
this.result = this.operations[this.previousOperator](this.result);
}
this.previousOperator = '+';
this.result = '';
}
else if (event.target.label === "-"){
if (this.operations.current === 0)
{
this.operations.current = parseInt(this.result);
}
else{
this.result = this.operations[this.previousOperator](this.result);
}
this.previousOperator = '-';
this.result = '';
}
else if (event.target.label === "*"){
if (this.operations.current === 0)
{
this.operations.current = parseInt(this.result);
}
else{
this.result = this.operations[this.previousOperator](this.result);
}
this.previousOperator = '*';
this.result = '';
}
else if (event.target.label === "/"){
if (this.operations.current === 0)
{
this.operations.current = parseInt(this.result);
}
else{
this.result = this.operations[this.previousOperator](this.result);
}
this.previousOperator = '/';
this.result = '';
}
else if (event.target.label === "="){
this.result = this.operations[this.previousOperator](this.result);
this.result = this.operations['=']();
this.clrExpression = true;
}
else{
this.result = this.result + event.target.label;
}
}
}
SimpleCalculator.js-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Create one Lightning Tab and include this LWC component as well.
Let's see the output here.
Output:-
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.