Netbyzz

+91 91067 67818

#A001
Day Countdown Animation

HTML :

<!-- CODE = #A001 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NETBYZZ A001</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCc4lFgz56_Dkz2L7pLH_FvfMh2ERelUApVap-jrqzS7FPJr9ziQuNXSzDES7E1NdLqrQTfSmkUOVH13bNFEcii4GQJdBY2ReinW17z7QN-1BcbBurd0QNeVFmGOMtxp-3GVjO9-eo-ZwnpOqyKPzBeiSXUnZdBz9aQXzbt1W_h7-ubqfFcznB7ugwjJg/s4000/Netbyzz5.png" alt="Netbyzz Logo" class="Netbyzz">
  <div id="counter">Challenge starts now!</div>

  <script src="script.js"></script>
</body>
</html>

CSS :

.Netbyzz {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 15%;
  /* Adjust the size of the logo */
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* background: linear-gradient(to right, #282a4c, #8f94fb); */
  background: -webkit-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  color: #fff;
  font-family: 'Arial', sans-serif;
}

#counter {
  font-size: 4rem;
}

JS :

let dayCount = 1;
const counterElement = document.getElementById("counter");
let intervalId;

function updateCounter() {
  if (dayCount <= 100) {
    counterElement.textContent = `Day ${dayCount}`;
    dayCount++;
  } else {
    counterElement.textContent = "Challenge Completed!";
    clearInterval(intervalId);
    setTimeout(() => {
      dayCount = 101;
      intervalId = setInterval(updateCounter, 1000);
    }, 5000); // Pause for 5 seconds
  }
}

intervalId = setInterval(updateCounter, 100);
 

Source Code

Download Now