LWC Component Only

Requirement :

‹

›

Create a LWC having two input fields which will take two number as input and show result, addition happen on button click.

cmpAddition.html

<template>

    <lightning-card title="Addition" icon-name="custom:custom62">        

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

            <lightning-input 

                value={firstNumber} 

                name="fnumber" 

                label="First Number" 

                onchange={firstNumberValue}>

            </lightning-input>

            <lightning-input 

                value={secondNumber} 

                name="snumber" 

                label="Second Number" 

                onchange={secondNumberValue}>            

            </lightning-input>           

            <br>

            <lightning-button 

                label="Add"

                onclick={addition}>

            </lightning-button>        

        </p>        

            <div slot="footer">

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

            </div>

    </lightning-card>

</template>

cmpAddition.js

import { LightningElement,track } from 'lwc';

export default class AdditonCls extends LightningElement {

    @track firstNumber;

    @track secondNumber;

    @track result;

    firstNumberValue(event){        

        this.firstNumber = event.target.value;        

    }

    secondNumberValue(event){        

        this.secondNumber = event.target.value;        

    }

    addition(event){

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

    }            

}

Addition.js-meta.xml

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

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

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__Tab</target>

      </targets>

</LightningComponentBundle>

Output:

Other Useful Blog

Lightning Component

Happy Learning !!