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.

50+ HTML, CSS & JavaScript Projects With Source Code

Output

simple blank screen output

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.

Portfolio Website using HTML and CSS (Source Code)

Output

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

Reverse Countdown Timer Using JavaScript