LWC Change Message

Requirement :

‹

›

Create a LWC that show a message in the center of the component on the basis of any one of the 3 button clicked. Initially, when the component loads, the message in the center of the component should say: "How's the weather Today ?". There will be 3 buttons with these properties below the message:

a) Btn 1- Color- Red, Label- Hot- On click changes the message to: "Its Hot !"
b) Btn 2- Color- Blue, Label- Cool- On Click changes the message to: "Its Cool"
c) Btn 3- Color- Green, Label- Hazy- On Click changes the message to:"Not Very
clear"

or in other words

Change message on button clicked.

cmpChangeMessage.html

<template>

    <center>

        <lightning-card title="Change Message on button click">            

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

            <br><br>

            <lightning-button 

                variant="destructive"

                label="Hot" 

                onclick={hotbutton}>

            </lightning-button>

            &nbsp;&nbsp;               

            <lightning-button 

                variant="brand"

                label="Cool" 

                onclick={coolbutton}>

            </lightning-button>

            &nbsp;&nbsp;

            <lightning-button 

                variant="success"

                label="Hazy" 

                onclick={clearbutton}>

            </lightning-button>

        </lightning-card>

    </center>

</template>

cmpChangeMessage.js

import { LightningElement, track } from 'lwc';

export default class cmpChangeMessage extends LightningElement {

    @track message = 'How \'s the weather Today ?';

    hotbutton(){

        this.message = 'Its Hot !';

    }

    coolbutton(){

        this.message = 'Its Cool !';

    }

    clearbutton(){

        this.message = 'Not very clear !';

    }

}

cmpChangeMessage.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 !!