COUNTDOWN COMPONENT IN LIGHTNING

Hi Trailblazer Community,

Today i am going to share the information of the Countdown or Timer Lightning Component. 

Prerequisite : Basic knowledge of Lightning, Basic knowledge of Lightning Data Service.

Need to work before : Create on object named Property__c -> Create one field named Date_End__c (Date/Time type).


So here i am sharing the code of the component.

Step 1 : Create One Lightning Component Give  name it to "TimerComponent". (You can give other name also.). Copy the below code in the component.

TimerComponent.cmp

 <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >  
   <!-- Attributes for Countdown Components-->  
   <aura:attribute name="day" type="Integer" />  
   <aura:attribute name="hour" type="Integer" />  
   <aura:attribute name="minute" type="Integer" />  
   <aura:attribute name="second" type="Integer" />  
   <!--Attributes for buttons-->  
   <aura:attribute name="buttonname" type="String" default="Start Timer"/>  
   <aura:attribute name="buttonnameprior" type="String" />  
   <!--Attributes for the Objects to get fields-->  
   <aura:attribute name="recordId" type="Id" />  
   <aura:attribute name="property" type="Property__c" />   
   <!-- Fetching the data from LDS -->  
   <force:recordData aura:id="service"   
            recordId="{!v.recordId}"  
            targetFields="{!v.property}"   
            fields="Id, Date_End__c"/>  
   <lightning:card iconName="standard:event" title="Time Countdown">  
     <div class="indent">  
       <lightning:layout >  
         <lightning:layoutitem >  
           <lightning:button label="{!v.buttonname}" class="days-block" onclick="{!c.startTime}" aura:id="but"/>  
         </lightning:layoutitem>  
         <lightning:layoutitem flexibility="grow" class="chart">  
           <div class="axis bgcolor">  
             <div style="padding-left:2px;padding-top:6px;"><ui:outputText aura:id="day" value="{!v.day + ' Days'}" /></div>  
             <div style="padding-left:2px;padding-top:6px;"><ui:outputText aura:id="hr" value="{!v.hour + ' Hour'}" /></div>  
             <div style="padding-left:2px;padding-top:6px;"><ui:outputText aura:id="min" value="{!v.minute + ' Minute'}"/></div>  
             <div style="padding-left:2px;padding-top:6px;"><ui:outputText aura:id="sec" value="{!v.second + ' Second'}"/></div>  
           </div>  
         </lightning:layoutitem>  
       </lightning:layout>  
     </div>  
   </lightning:card>  
 </aura:component>  

Step 2 : Create the controller for the TimerComponent by clicking rightside on controller.

TimerComponentController.js

 ({  
   startTime : function(component, event, helper){  
     component.set("v.buttonnameprior", event.getSource().get("v.label"));  
     if(component.get("v.buttonnameprior") === 'Start Timer'){  
       component.set("v.buttonname", 'Stop Timer');  
     }else{  
       component.set("v.buttonname", 'Start Timer');  
     }  
     var dt = new Date(component.get("v.property").Date_End__c);  
     var countDownDate = dt.getTime();  
     if(component.get("v.buttonnameprior") === 'Start Timer' && component.get("v.buttonname") === 'Stop Timer'){  
     }  
     var x = setInterval(function(){  
       var now = new Date().getTime();  
       var distance = countDownDate - now;  
       var days = Math.floor(distance / (1000 * 60 * 60 * 24));  
       var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
       var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));  
       var seconds = Math.floor((distance % (1000 * 60)) / 1000);  
       component.set("v.day",days);  
       component.set("v.hour",hours);  
       component.set("v.minute",minutes);  
       component.set("v.second",seconds);  
       if(distance < 0 || component.get("v.buttonnameprior") === 'Stop Timer' && component.get("v.buttonname") === 'Start Timer'){  
         clearInterval(x);  
         component.set("v.day",days);  
         component.set("v.hour",hours);  
         component.set("v.minute",minutes);  
         component.set("v.second",seconds);  
       }  
     }, 1000);  
   },  
 })  

Step 3 : Create the css by by clicking on right side "Style". Copy the below style component for TimerComponent.css file.

TimerComponent.css

 .THIS .days-block {  
   text-align: center;  
   margin-right: 8px;  
   padding: 8px 12px;  
   border-radius: 0.25rem;  
   border: solid 1px rgb(216, 221, 230);  
 }   
 .THIS .indent {  
   margin: 0 24px;  
 }  
 .THIS .bgcolor {  
   background-color: #FFF;  
 }  
 .THIS .days-block.red {  
   color: #C23934;  
   border: solid 1px #C23934;  
 }   
 .THIS .days-block.green {  
   color: #00716B;  
   border: solid 1px #00716B;  
 }   
 .THIS .days-block.orange {  
   color: #FFB75D;  
   border: solid 1px #FFB75D;  
 }   
 .THIS .days {  
   font-size: 32px;  
   line-height: 32px;  
   font-weight: 300;  
   margin-right: 12px;  
   margin: 0;  
   padding: 0;  
 }   
 .THIS .chart {  
   position: relative;  
   height: 40px;  
 }  
 .THIS .bar {  
   -webkit-transform: translate3d(0, 0, 0);  
   transform: translate3d(0, 0, 0);  
   height: 34px;  
   width: 0;  
   transition: all .5s ease-in-out;  
   position: absolute;  
   bottom: 0px;  
   left: 0px;  
   right: 0;  
   z-index: 20;  
 }  
 .THIS .axis {  
   position: absolute;  
   left: 0;  
   right: 0;  
   display: flex;  
   bottom: 0;  
 }  
 .THIS .axis > div {  
   height: 34px;  
   flex: 1;  
   border: solid 1px rgb(216, 221, 230);  
   z-index: 20;  
   position: relative;  
 }  

Step 4 : Add this component to App Builder page of Property Object.

How it will Looks??

Timer Component before countdown

Timer Component after countdown

 Description : In this component i am getting the future date(End_Date__c) from lightning data service. and when i click the "Start Timer" button the timer will start for that future date from today's date and time.


Thanks and Happy Coding Salesforce Geeks.....!!😊