Reverse countdown javascript | countdown on card using html css javascript – codewithrandom

Reverse countdown javascript | countdown on card using html css javascript – codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Reverse countdown. We use HTML, Css, and javascript for this Reverse countdown. Hope you enjoy our blog so let’s start with a basic HTML structure for a Reverse countdown.

HTML code

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

There is all HTML code for the Reverse countdown. Now, you can see output without CSS, then we write css & javascript for Reverse countdown.

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

Now we have completed our CSS section,  Here is our updated output CSS.

output

Javascript code 

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

Final output


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Reverse countdown. you can see 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 using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..

Leave a Reply