Reverse Countdown Timer Using JavaScript

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Reverse Countdown Timer. We use HTML, CSS, and JavaScript for this Reverse Countdown Timer.

I hope you enjoy our blog so let's start with a basic html structure for a Reverse Countdown Timer.

HTML Code For Reverse Countdown Timer

<div class="card">
<div class="number"></div>
</div>

There is all the html code for the reverse countdown timer. Now, you can see output without Css and JavaScript. then we write css for styling and give the main functionality of the Reverse Countdown Timer using javascript.

CSS Code For Reverse Countdown Timer

:root {
--background-color: #0e1538;
--text-color: #fff;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--background-color);
font-family: var(--font);
}
/* main Card */
.card {
width: 200px;
height: 275px;
position: relative;
user-select: none;
cursor: pointer;
transition: 0.3s ease-in-out;
}
/* Linear Background by using ::before */
.card::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
transform: skew(2deg, 4deg);
background: linear-gradient(315deg, #00ccff, #0e1538, #d400d4);
}
/* countdown number */
.card > .number {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
font-size: 8em;
display: grid;
place-items: center;
background-color: var(--background-color);
color: var(--text-color);
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 0 200px rgba(225, 225, 225, 0.3);
transform: rotate(720deg);
}

We have completed our CSS Section For Reverse Countdown. Here is our updated output HTML + CSS.

JavaScript Code For Reverse Countdown Timer

var number = document.querySelector(".number");
var count = 20;
// Countdown Interval which runs on every 1s
var countdownInterval = setInterval(() => {
// if count is less than or equal to 1 then clear the Interval
count <= 1 && clearInterval(countdownInterval);
number.textContent = count <= 10 ? `0${--count}` : `${--count}`;
}, 1000);

We have completed our Reverse Countdown Timer Project. Here is our updated output with Html, Css, and JavaScript. Hope you like the Reverse Countdown Timer. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a Reverse 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