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.

Calculator in LWC

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?

1 thought on “Create a Simple Calculator Component in LWC”

Leave a comment

error: Content is protected !!