Countdown timer hours minutes seconds jquery

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