Lesson: 03 | Operators

HTML

<template>
  <p>{number1} + {number2} = {result}</p>
  <button onclick={handleAddition}>Add</button>
  <button onclick={handleSubtraction}>Subtract</button>
  <button onclick={handleMultiplication}>Multiply</button>
  <button onclick={handleDivision}>Divide</button>
  <button onclick={handleModulus}>Modulus</button>
  <button onclick={handleIncrement}>Increment</button>
  <button onclick={handleDecrement}>Decrement</button>
</template>

Java Script

import { LightningElement } from 'lwc';

export default class OperatorExample extends LightningElement {
  number1 = 5;
  number2 = 10;
  result = null;

  handleAddition() {
    this.result = this.number1 + this.number2;
  }

  handleSubtraction() {
    this.result = this.number1 - this.number2;
  }

  handleMultiplication() {
    this.result = this.number1 * this.number2;
  }

  handleDivision() {
    this.result = this.number1 / this.number2;
  }

  handleModulus() {
    this.result = this.number1 % this.number2;
  }

  handleIncrement() {
    this.number1++;
  }

  handleDecrement() {
    this.number1--;
  }
}

Ternary Operator:

import { LightningElement, track } from 'lwc';

export default class TernaryExample extends LightningElement {
    @track isLoggedIn = true;

    greetingMessage = this.isLoggedIn ? 'Welcome, User!' : 'Please log in to continue';

    handleClick() {
        this.isLoggedIn = !this.isLoggedIn;
        this.greetingMessage = this.isLoggedIn ? 'Welcome, User!' : 'Please log in to continue';
    }
}

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

Mastered by 12 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 03 | Operators

HTML

Lightning Web Components