Hello Coder! Welcome to the Codewithrandom blog, We learn how to Create a Countdown Timer Using HTML, CSS, and JavaScript. A countdown timer starts at a certain moment and ticks down to zero. When a significant event is approaching or there are seconds left in a game, it is frequently utilized to enhance excitement or a sense of urgency in the situation.
There are many different situations where countdown timers are employed, such as events, presentations, games, and even in daily life for time management.
A countdown timer assists users in increasing their productivity and working more efficiently.
Countdown timer project you always seen somewhere time matter most like in racing or swimming race for count hour, minutes and second but this our countdown is special because we do functionality to count day, hour, minute and second. So let's start creating countdown timer
I hope you enjoy our blog so let's start with a basic HTML Structure for the Countdown Timer.
Countdown Timer Html Code:-
<div class="container">
<h1 id="headline">Countdown to my birthday</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div id="content" class="emoji">
<span></span>
<span></span>
<span></span>
</div>
</div>
To create a container for our countdown timer, we will use the div tag and class "container." Our countdown timer's heading will be made using the h1 tag. Now let's make a timer that counts down in days, hours, minutes, and seconds. Utilizing the unorderlist, we'll make the countdown.
The class "emoji" will now be added to a new div tag. For the different span tags for different emojis, we will make three distinct tags.
For the countdown timer, all the HTML code is present. Currently, JavaScript and CSS are not present in the output. The countdown timer's styling is done with CSS, and its functionality is achieved with JavaScript.
Countdown Timer CSS Code:-
/* general styling */
:root {
--smaller: .75;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
}
body {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
}
.emoji {
display: none;
padding: 1rem;
}
.emoji span {
font-size: 4rem;
padding: 0 .5rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: calc(1.5rem * var(--smaller));
}
li {
font-size: calc(1.125rem * var(--smaller));
}
li span {
font-size: calc(3.375rem * var(--smaller));
}
}
in this code, we set the box-sizing to "border-box," for all margins and padding reset using the body tag selector. We will also set the margin to "zero," and the background color of our body to "yellow."
also, we use "inline-block" for displays and the font size to 1.5 em using the li tag selector.
This is All Css Code For Countdown Timer. Here is the updated Output with Html + Css.
Countdown Timer JavaScript Code:-
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
//I'm adding this section so I don't have to keep updating this pen every year :-)
//remove this if you don't need it
let today = new Date(),
dd = String(today.getDate()).padStart(2, "0"),
mm = String(today.getMonth() + 1).padStart(2, "0"),
yyyy = today.getFullYear(),
nextYear = yyyy + 1,
dayMonth = "05/29/",
birthday = dayMonth + yyyy;
today = mm + "/" + dd + "/" + yyyy;
if (today > birthday) {
birthday = dayMonth + nextYear;
}
//end
const countDown = new Date(birthday).getTime(),
x = setInterval(function() {
const now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
document.getElementById("headline").innerText = "It's my birthday!";
document.getElementById("countdown").style.display = "none";
document.getElementById("content").style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
The code starts by declaring a variable called dayMonth. The value of this variable is "09/30/". This means that the month is September and the year is 30. Next, it declares a variable called birthday. The value of this variable is "09/30/2015".
Then it declares another variable called today which will be used to store the current date and time as well as an interval for counting down from birthdays until now (the current time). It then creates an interval with setInterval() function so that every second, we can update our text elements with how many days, hours, minutes or seconds have passed since birthdays were created.
The code is used to calculate the time until a given date. The code starts by declaring a variable called today which is set to "09/30/". Next, it declares another variable called birthday which is set to dayMonth + yyyy. Then, it calculates today and sets it equal to mm + "/" + dd + "/" + yyyy. Lastly, if today > birthday then the program sets birthday equal to dayMonth + nextYear.
Now that we have completed our Countdown Timer. our updated output with Html, and Css JavaScript. Hope you like the Countdown Timer Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
This post teaches us how to create a Countdown Timer Using Html, Css, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by - Code With Random/Anki
Code By - Silver Drop
Top comments (0)