Telegram Group Join Now
ADVERTISEMENT
Simple Countdown Timer Using HTML,CSS and JavaScript

ADVERTISEMENT
ADVERTISEMENT
Welcome to the Codewithrandom blog. This blog teaches us how to create a Countdown Timer. We use HTML,CSS, and JavaScript for the Countdown Timer.
ADVERTISEMENT
Code by | Silver Drop |
Project Download | Link Available Below |
Language used | HTML ,CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
I hope you enjoy our blog so let’s start with a basic HTML Structure for the Countdown Timer.
ADVERTISEMENT
HTML Code For Countdown Timer
<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 output without Css and JavaScript. then we write Css Code for styling the Countdown Timer and Add JavaScript Code for the Main functionality in Countdown Timer.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Only Html Code Output
ADVERTISEMENT

CSS Code For Countdown Timer
/* 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)); } }
This is All Css Code For Countdown Timer. Here is the updated Output with Html + Css.
50+ HTML, CSS & JavaScript Projects With Source Code
ADVERTISEMENT

JavaScript Code For Countdown Timer
(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 Of Simple Countdown Timer

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
ADVERTISEMENT
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
Which code editor do you use for Countdown Timer coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this is a responsive project
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Hey there, You have done an excellent job. I will definitely digg
it and personally suggest to my friends. I am sure they will be benefited from this website.