Simple Calculator Example with Lightning Web Components

Hi ,

Here let's talk about a simple example of a Calculator with a track decorator. @track decorator should be where we need to re-render the changes of a property to the template (HTML file) in the Lightning Web component only but not for all properties.
in the following, we are decorating only one property "result" with "track".

Let's see three files how it looks like. Here we are using  <lightning-card> also for UI design.

calculator.html

<template>

    <lightning-card>

        <h3 slot="title">

            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>

            Calculator Example

        </h3>

        <div slot="footer">

                <lightning-badge label={result}></lightning-badge>                

        </div>

        <p class="slds-p-horizontal_small">

            <lightning-input value={firstNumber} name="fnumber" label="First Number" onchange={handleChanges}></lightning-input>

            <lightning-input value={secondNumber} name="snumber" label="Second Number" onchange={handleChanges}></lightning-input>

        </p>

    </lightning-card>

</template>

calculator.js

import { LightningElement,track } from 'lwc';

export default class CalcTest extends LightningElement {

    firstNumber=0;

    secondNumber=0;

    @track result=0;

    handleChanges(event){

        if(event.target.name==='fnumber'){

            this.firstNumber= event.target.value;

        }

        if(event.target.name==='snumber'){

            this.secondNumber= event.target.value;

        }

        this.result = parseInt(this.firstNumber)+ parseInt(this.secondNumber);

    }

}

calculator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>        

    </targets>

</LightningComponentBundle>

Output:

References:
https://www.youtube.com/channel/UCipDch4PvPqm0uY4SK7mi1A
https://developer.salesforce.com/tv/lwc-video-gallery/
https://developer.salesforce.com/docs/component-library/documentation/lwc/reference_decorators
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_private_reactive

https://developer.salesforce.com/docs/component-library/documentation/lwc/reference_decorators