Input data with Reset button Example using LWC #inSalesforce

 Input data with Reset button Example using LWC #inSalesforce

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

<template>
    <form>
        <div class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
            <b>Input Screen with Reset</b></div>
        <div class="slds-box slds-theme_default">
            <lightning-input 
                    type="email" 
                    label="Email"
                    value={emailvalue}
                    onchange={handleEmailChange}>
            </lightning-input>
            <div class="slds-m-top_small slds-align_absolute-center">
                <lightning-button 
                    variant="Neutral" 
                    label="Reset" 
                    class="slds-m-left_x-small" 
                    onclick={handleCancel}>
                </lightning-button>
                <lightning-button 
                    variant="brand" 
                    class="slds-m-left_x-small" 
                    label="Next" 
                    onclick={handleNext}>
                </lightning-button>
            </div>
        </div>
    </form>
</template>

import { LightningElement } from 'lwc';
export default class sampleExample extends LightningElement() {
    emailvalue ="sample@demo.com";
    handleEmailChange(event){
        this.emailvalue = event.target.value;
    } 
    handleNext() {
    alert('confirm! '+'Email: '+this.emailvalue);
    }
    handleCancel(){
this.emailvalue = "sample@demo.com";
    }
}

Visual: https://www.youtube.com/watch?v=ziJfBJlO9GA