ADVERTISEMENT

Reverse Countdown Timer Using JavaScript

Telegram Group Join Now

ADVERTISEMENT

Reverse Countdown Timer Using JavaScript

 

ADVERTISEMENT

Reverse Countdown Timer Using JavaScript
Reverse Countdown Timer Using JavaScript

ADVERTISEMENT

 

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.

ADVERTISEMENT

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

ADVERTISEMENT

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

ADVERTISEMENT

Reverse Countdown Timer Using JavaScript
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

ADVERTISEMENT

Reverse Countdown Timer Using JavaScript

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

ADVERTISEMENT

Reverse Countdown Timer Using JavaScript
Reverse Countdown Timer Using JavaScript

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT