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.
<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>
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);
#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; }
In this post, we find a difference between two dates in days
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);
<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>
StackBiltz working example here Open StackBiltz
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.
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>
ul li{ cursor: pointer; background: #008f8d; list-style: none; margin-bottom: 15px; padding: 7px 15px; } .active{ background: black; color: white; }
Finally, we will write down our jquery code.
$(document).ready(function(){ $('li').click( function(){ $(this).toggleClass('active').siblings().removeClass('active'); }); });
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.
Today we are going to create a Countdown timer that shows 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>
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>