The countdown functionality can easily be added to HTML code, you do need to set the expiry time and add some jquery code to your project.

HTML FILE

<div id="countdown">
  <div id="days"></div>
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

 JS FILE

function counterTime() {
    var endTime = new Date("10 June 2023 12:00:00 GMT+05:30");         
    endTime = (Date.parse(endTime) / 1000);

    var now = new Date();
    now = (Date.parse(now) / 1000);

    var timeLeft = endTime - now;

    var days = Math.floor(timeLeft / 86400); 
    var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
    var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
    var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

    if (hours < "10") { hours = "0" + hours; }
    if (minutes < "10") { minutes = "0" + minutes; }
    if (seconds < "10") { seconds = "0" + seconds; }

    if(days >= 0 && hours >= 0 && minutes >= 0 && seconds >= 0){
        $("#days").html(days + "<span>Days</span>");
        $("#hours").html(hours + "<span>Hours</span>");
        $("#minutes").html(minutes + "<span>Minutes</span>");
        $("#seconds").html(seconds + "<span>Seconds</span>");
    }else{
        $("#countdown").html('Expired');
    }
}

setInterval(function() { counterTime(); }, 1000);

CSS FILE

#countdown{
  display: flex;
  font-family: 'Poppins';
}

#countdown div{
  margin: 0 7px;
  font-size: 24px;
  font-weight: bold;
}

#countdown span{
  font-weight: normal;
  font-size: 16px;
  margin: 0 5px;
}

 

RESULT

Post your comment

Your email address will not be published. Required fields are marked *