Countdown Timer | Countdown Timer Html Css Javascript

Countdown Timer | Countdown Timer Html Css Javascript


WelcomeπŸŽ‰ to Code With Random blog. This blog teaches us how we create a Countdown Timer. We use HTML, Css, and javascript for the Countdown Timer. I hope you enjoy our blog so let’s start with a basic HTML structure for the 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>

There is all the HTML code for the Countdown Timer. Now, you can see an output with a Countdown Timer then we write javascript for the Countdown Timer.

output

Countdown Timer | Countdown Timer Html Css Javascript

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));
}
}

Css Updated output


Countdown Timer | Countdown Timer Html Css Javascript

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)
}());

Final output

Countdown Timer | Countdown Timer Html Css Javascript

Now that we have completed our javascript section, our updated output with javascriptHope you like the Countdown Timer. 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 simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code By – Silver Drop
Check out more…..

Share on:

Leave a Comment