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

Difference between two dates in days jquery

In this post, we find a difference between two dates in days

TypeScript File

var timeStart= new Date(this.startDate).getTime();
var timeEnd = new Date(this.endDate).getTime();
var diff = timeEnd - timeStart; //in ms
var milliseconds = timeStart > timeEnd ? timeStart % timeEnd : timeEnd % timeStart;
var seconds = milliseconds / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var weeks = days / 7;
var totalDays = Math.ceil(days);
this.result = totalDays + ' Days';
// console.log('Days',days.toFixed(2));
console.log('Total Days',totalDays);

HTML File

<h1>Difference b/w two dates in days</h1>

<p>Start Date - <b>{{startDate}}</b></p>
<p>End Date - <b>{{endDate}}</b></p>
<p>Result - <b>{{result}}</b></p>

Result

difference between two days

StackBiltz working example here Open StackBiltz

jQuery Add/Remove class on parent/sibling

The jQuery siblings() method is used to get the sibling elements of the selected element.

The following example will highlight the siblings of the <li> element by adding the class .active on document ready.

HTML CODE

In the initial step, you need to load the latest version of jQuery into your file.

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

<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>

CSS CODE

ul li{
  cursor: pointer;
  background: #008f8d;
  list-style: none;
  margin-bottom: 15px;
  padding: 7px 15px;
}

.active{
  background: black;
  color: white;
}

jQuery CODE

Finally, we will write down our jquery code.

$(document).ready(function(){
  $('li').click( function(){
    $(this).toggleClass('active').siblings().removeClass('active');
  });
});

 

How to change background color with infinity loop?

You don’t need jQuery for making this trick. You can use simple CSS animation instead, and it will be more performance and simplicity.

In my example, we just add a div with a block class name.

<div class="block"></div>

After that, we add the CSS property

html, body {
     width: 100%;
     height: 100%;
} 

@keyframes color-animation {
    0% {
       background: #ad1457;
    }
    50% {
       background: #6a1b9a;
    } 
    100% {
       background: #bbdefb
    } 
}

.block {
   width: 100%;
   height: 100%;
   animation: color-animation 3s infinite linear alternate;
}

In this code, we created simple css animation, which changes the colors of our block.

jQuery Countdown Timer with Minutes & Seconds

Today we are going to create a Countdown timer that shows minutes & Seconds.

How to Create jQuery Countdown Timer with Minutes & Seconds

In the initial step, you need to load the latest version of jQuery into your file.

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

Now the important step to create the HMTL markup. Let’s create a div with a class name countdown. Remember, we will use this class in jQuery.

<div class="countdown"></div>

The Javascript

Finally, we will write down our jquery code.

<script type="text/javascript">
    
var timer2 = "02:00";
var interval = setInterval(function() {


  var timer = timer2.split(':');
  //by parsing integer, I avoid all extra string processing
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  --seconds;
  minutes = (seconds < 0) ? --minutes : minutes;
  if (minutes < 0) clearInterval(interval);
  seconds = (seconds < 0) ? 59 : seconds;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  //minutes = (minutes < 10) ?  minutes : minutes;
  $('.countdown').html(minutes + ':' + seconds);
  timer2 = minutes + ':' + seconds;
}, 1000);
</script>