ADVERTISEMENT

Simple Countdown Timer Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Simple Countdown Timer Using HTML,CSS and JavaScript

Simple Countdown Timer Using HTML,CSS and JavaScript
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 bySilver Drop
Project DownloadLink Available Below
Language usedHTML ,CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Countdown Timer Table

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

Countdown Timer Using HTML,CSS and JavaScript
Countdown Timer Using HTML,CSS and JavaScript

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

Countdown Timer Using HTML,CSS and JavaScript
Countdown Timer Using HTML,CSS and JavaScript

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

Countdown Timer Using HTML,CSS and JavaScript
Countdown Timer Using HTML,CSS and JavaScript

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

Telegram Group Join Now

Share on:

1 thought on “Simple Countdown Timer Using HTML,CSS and JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT