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

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.
output
Reverse countdown javascript | countdown on card using html css javascript - codewithrandom
simple blank screen output

CSS Code

 :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
Reverse countdown javascript | countdown on card using html css javascript - codewithrandom

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
Reverse countdown javascript | countdown on card using html css javascript - codewithrandom



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.....

Post a Comment

Previous Post Next Post