Create a Simple Calculator Component in LWC

In this post, we are going to create a very basic simple Calculator to do basic operations like

• Addition, Subtraction, Multiplication, Division
• And it should receive input from the user and display the Result. ( Dynamic! No Pushing buttons)

Without further ado, let’s get started.

We have three basic HTML, JS, and MetaXML to set up in the Lightning Component Bundle for this requirement.

SFDX:Lightning Web Component >> New >> Calc 

Calc HTML

<template>
  <div class="slds-box slds-theme_shade slds-theme_shade">
  
    <div class="slds-size_1-of-3 slds-visual-picker slds-visual-picker_small">
      <lightning-radio-group
        name="operGroup"
        label="Operation"
        options={operOpt}
        value={oper}
        required
        type="button"
        onchange={handleChangeOper}
      >
      </lightning-radio-group>
    </div>

    <div class="slds-size_1-of-3">
      <lightning-input
        label="Number 1"
        name="num1"
        onchange={handleChangeNum1}
      ></lightning-input>
          <strong>[{oper}]</strong>
      </div>

      <div class="slds-size_1-of-3">        
      <lightning-input
        label="Number 2"
        name="num2"
        onchange={handleChangeNum2}
      ></lightning-input>

    </div>
    <div class="slds-p-top_x-small slds-size_1-of-3">
    <div class="slds-box slds-theme_shade slds-theme_shade ">
      <div slot="footer">
        <div class=" slds-text-title_caps"> Result </div>
        <lightning-input
          name="result"
          read-only="true"
          value={result}
        ></lightning-input>
      </div>
  </div>
  </div>
  </div>

</template>

Calc JS

<template>
  <div class="slds-box slds-theme_shade slds-theme_shade">
  
    <div class="slds-size_1-of-3 slds-visual-picker slds-visual-picker_small">
      <lightning-radio-group
        name="operGroup"
        label="Operation"
        options={operOpt}
        value={oper}
        required
        type="button"
        onchange={handleChangeOper}
      >
      </lightning-radio-group>
    </div>

    <div class="slds-size_1-of-3">
      <lightning-input
        label="Number 1"
        name="num1"
        onchange={handleChangeNum1}
      ></lightning-input>
          <strong>[{oper}]</strong>
      </div>

      <div class="slds-size_1-of-3">        
      <lightning-input
        label="Number 2"
        name="num2"
        onchange={handleChangeNum2}
      ></lightning-input>

    </div>
    <div class="slds-p-top_x-small slds-size_1-of-3">
    <div class="slds-box slds-theme_shade slds-theme_shade ">
      <div slot="footer">
        <div class=" slds-text-title_caps"> Result </div>
        <lightning-input
          name="result"
          read-only="true"
          value={result}
        ></lightning-input>
      </div>
  </div>
  </div>
  </div>

</template>

Calc MetaXML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

In this basic demo component, we have used a switch to change the operator, and any changes are dynamically reflected in the Result be it data or operator.

Read More: Create a contact firm in LWC

Hope You Have An Amazing Day! Let me know in the comments if it helped you learn something?

Share with friends and colleagues ?

• Facebook
• Twitter
• LinkedIn
• Tumblr