Lightning Component For Timer

SK_Timmer.cmp

<aura:component >
    
    <aura:handler name="init" value="{! this }" action="{!c.doInit}"/>
    <aura:attribute name="ltngHour" type="Integer" default="00" />
    <aura:attribute name="ltngMinute" type="Integer" default="00"/>
    <aura:attribute name="ltngSecond" type="Integer" default="00"/>
    <aura:attribute name="ltngTimmer" type="Integer" default="00:00:00" />
    <aura:attribute name="ltngIsDisplayed" type="boolean" default="false"/> 
    
    <div class="slds-card slds-align_absolute-center" style="width:250px;padding:8px;" >
        <div class="slds-grid slds-wrap" >
            <div class="slds-col slds-size_1-of-1 slds-align_absolute-center" >
                <b>Timmer</b>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <p style="text-align: center;">hh</p>
                <lightning:input value="{!v.ltngHour}" label="" name="hh" placeholder="hh" type="number" maxlength="2" min="0" max="60" />
            </div>
            <div class="slds-col slds-size_1-of-3">
                <p style="text-align: center;">mm</p>
                <lightning:input value="{!v.ltngMinute}" label="" name="mm" placeholder="mm" type="number" maxlength="2" min="0" max="60" />
            </div>
            <div class="slds-col slds-size_1-of-3">
                <p style="text-align: center;">ss</p>
                <lightning:input value="{!v.ltngSecond}" label="" name="ss" placeholder="ss" type="number" maxlength="2" min="0" max="60" />
            </div>
            <div class="slds-col slds-size_1-of-1 slds-align_absolute-center" >
                {!v.ltngTimmer}
            </div>
            <div class="slds-col slds-size_1-of-1 slds-align_absolute-center">
                <lightning:button variant="brand" label="Start" onclick="{! c.handleStartClick }" disabled="{!v.ltngIsDisplayed}"/>
                <lightning:button variant="brand" label="Stop" onclick="{! c.handleStopClick }" disabled="{! !v.ltngIsDisplayed}"/>
                <lightning:button variant="brand" label="Reset" onclick="{! c.handleResetClick }" />
            </div>
        </div>
    </div>    
</aura:component>

SK_TimmerApp.app

<aura:application extends="force:slds">
	  <c:SK_Timmer />
</aura:application>

SK_TimmerController.js

({
    doInit : function(component, event, helper) {
        console.log("diinit get called!!");
        //var tt=component.get("v.ltngHour")+":"+component.get("v.ltngMinute")+":"+component.get("v.ltngSecond");
        component.set("v.ltngTimmer","00:00:00");
    },
    handleStartClick : function(component, event, helper) {
        console.log("start button clicked!!");
        
        var hours=component.get("v.ltngHour");
        var minutes=component.get("v.ltngMinute");
        var seconds=component.get("v.ltngSecond");
        var tt=component.get("v.ltngHour")+":"+component.get("v.ltngMinute")+":"+component.get("v.ltngSecond");
        
        if(tt=="0:0:0" || tt=="00:00:00"){
            alert("Please enter some value for timer!!");
            
        }
        else{
            component.set("v.ltngTimmer",hours+":"+minutes+":"+seconds);
            helper.setStartTimeOnUI(component);
        }
    },
    handleStopClick : function(component, event, helper) {
        console.log("stop button clicked!!");
        var currtt=component.get("v.ltngTimmer");
        var ss = currtt.split(":");
        component.set("v.ltngHour",ss[0]);
        component.set("v.ltngMinute",ss[1]);
        component.set("v.ltngSecond",ss[2]);
        helper.setStopTimeOnUI(component);
    },
    handleResetClick : function(component, event, helper) {
        console.log("Reset button clicked!!");
        helper.setResetTimeOnUI(component);
    } 
})

SK_TimmerHelper.js

({
    waitingTimeId: null,
    setStartTimeOnUI : function(component) {
        component.set("v.ltngIsDisplayed",true);
        var currTime =component.get("v.ltngTimmer");
        var ss = currTime.split(":");
        var dt = new Date();
        dt.setHours(ss[0]);
        dt.setMinutes(ss[1]);
        dt.setSeconds(ss[2]);
        
        var dt2 = new Date(dt.valueOf() - 1000);
        var temp = dt2.toTimeString().split(" ");
        var ts = temp[0].split(":");
        
        component.set("v.ltngTimmer",ts[0] + ":" + ts[1] + ":" + ts[2]);
        this.waitingTimeId =setTimeout($A.getCallback(() => this.setStartTimeOnUI(component)), 1000);
        if(ts[0]==0 && ts[1]==0 && ts[2]==0 ){
            component.set("v.ltngTimmer","EXPIRED");
            window.clearTimeout(this.waitingTimeId);
            component.set("v.ltngIsDisplayed",false);
        }
    },
    setStopTimeOnUI : function(component) {
        component.set("v.ltngIsDisplayed",false);
        window.clearTimeout(this.waitingTimeId);
    },
    setResetTimeOnUI : function(component) {
        component.set("v.ltngIsDisplayed",false);
        component.set("v.ltngHour","0");
        component.set("v.ltngMinute","0");
        component.set("v.ltngSecond","0");
        component.set("v.ltngTimmer","00:00:00");
        window.clearTimeout(this.waitingTimeId);
    }
})