Lesson: 03 | Interactive Addition Calculator

HTML

<template>
    <lightning-card title="Simple Addition">
        <div class ='slds-var-m-around_medium'>
          <lightning-input type='number' label="First Number"  onkeyup={firstNumberHandler}></lightning-input>
          <lightning-input type='number' label="Second Number"  onkeyup={secondNumberHandler}></lightning-input>
          <div class="slds-var-m-around_medium"><b>Sum:</b> {Sum}</div>
        </div>
    </lightning-card>
</template>

JavaScript

import SumEPT from '@salesforce/schema/LightningUsageByPageMetrics.SumEPT';
import { LightningElement } from 'lwc';

export default class Calculater extends LightningElement {

    firstNumber = 0; secondNumber = 0;  
    
    firstNumberHandler(event){
        this.firstNumber = Number(event.target.value);
    }
    secondNumberHandler(event){
        this.secondNumber = Number(event.target.value);
    } 
    
    get Sum() {
        const sum = this.firstNumber + this.secondNumber;
        return `${this.firstNumber} + ${this.secondNumber} = ${sum}`;
    }
}

Prev You need to login to have access to the quizzes. Next

Mastered by 6 users.

Exercises

A. Administrator | Exercises (59 lessons)

B. Flow Builder | Exercises (41 lessons)

C. Apex Beginner | Exercises (78 lessons)

D. Apex Intermediate | Exercises (90 lessons)

E. Integration | Exercises (4 lessons)

F. Lightning Web Component (LWC) Exercises (14 lessons)

Go to top

Login to your account

Lesson: 03 | Interactive Addition Calculator

HTML

Exercises