This JavaScript code snippet helps you to create a countdown timer. These lines of code create a countdown timer to the date and time of the next birthday.
The first line sets the date and time of the next birthday to September 12 at 11:59:59 PM.
The setInterval() function is used to update the countdown every second.
The code calculates the difference between the current date and the next birthday using the getTime() method of the Date object.
The difference is then converted into months, days, hours, minutes, and seconds using mathematical calculations, and the values are displayed in the HTML elements with class names “months”, “days”, “hours”, “minutes”, and “seconds” respectively.
If the countdown reaches 0 (meaning the next birthday has arrived), the clearInterval() function is used to stop the countdown and a message is displayed in the HTML element with class name “countdown”.
How to Create JavaScript Multiple Countdown Timers
Create the HTML structure for the countdown timer as follows:
<div class="main">
<h1>Until new beginnings</h1>
<div class="countdown">
<div>
<span class="number months"></span>
<span>Months</span>
</div>
<div>
<span class="number days"></span>
<span>Days</span>
</div>
<div>
<span class="number hours"></span>
<span>Hours</span>
</div>
<div>
<span class="number minutes"></span>
<span>Minutes</span>
</div>
<div>
<span class="number seconds"></span>
<span>Seconds</span>
</div>
</div>
</div>
Style the countdown timer using the following CSS styles:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
color: #2C4A64;
}
.main{
height: 100vh;
background-size: cover;
background: url('https://i.ibb.co/jfLZFhm/Bitmap.png') no-repeat top center;
}
h1{
text-align: center;
font-weight: 400;
font-size: 3rem;
padding-top: 30px;
text-transform: uppercase;
}
.countdown{
display: flex;
justify-content: center;
gap: 20px;
}
.countdown > div{
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
box-shadow: 1px 1px 15px rgba(0,0,0,0.25);
width: 80px;
height: 80px;
border-radius: 5px;
}
.number {
font-weight: 500;
font-size: 44px;
color: #CAA78C;
}
div span:last-of-type{
font-size: 12px;
}
@media screen and (max-width:600px){
h1{
font-size: 40px;
}
.countdown{
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 30px;
}
.countdown > div{
background-color: #fff;
width: 250px;
height: 60px;
margin: 0;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
div span:last-of-type{
font-size: 24px;
text-transform: uppercase;
}
.number {
font-size: 34px;
}
}
Finally, add the following JavaScript function for its functionality:
// my next birthday
const newDate = new Date('sep 12 23 23:59:59').getTime()
const countdown = setInterval(() =>{
const date = new Date().getTime()
const diff = newDate - date
const month = Math.floor((diff % (1000 * 60 * 60 * 24 * (365.25 / 12) * 365)) / (1000 * 60 * 60 * 24 * (365.25 / 12)))
const days = Math.floor(diff % (1000 * 60 * 60 * 24 * (365.25 / 12)) / (1000 * 60 * 60 * 24))
const hours = Math.floor(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
const seconds = Math.floor((diff % (1000 * 60)) / 1000)
document.querySelector(".seconds").innerHTML = seconds < 10 ? '0' + seconds : seconds
document.querySelector(".minutes").innerHTML = minutes < 10 ? '0' + minutes :minutes
document.querySelector(".hours").innerHTML = hours < 10 ? '0' + hours : hours
document.querySelector(".days").innerHTML = days < 10 ? '0' + days : days
document.querySelector(".months").innerHTML = month < 10 ? '0' + month : month
if(diff === 0){
clearInterval(countdown)
document.querySelector(".countdown").innerHTML = 'Happy Birthday Ahmed'
}
}, 1000)
That’s all! hopefully, you have successfully created JavaScript Multiple Countdown Timers. If you have any questions or suggestions, feel free to comment below.
