creocodigo
Animated Counter Up using Javascript

Animated Counter Up using Javascript

Shikhar Baniya's photo
Shikhar Baniya
·

2 min read

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how you can create an animated counter up using Pure javascript. There are many plugins or frameworks present which gives you this functionality, but to create your own gives you another sense of proud. Here's a preview -

screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated Counter up using Javascript</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="container">
    <div class="heading">
      A life of Coder
    </div>
    <div class="counter-container">
      <div class="counter">
        <img src="https://raw.githubusercontent.com/nemo0/animated-counter/29e12c0cb15e90c27faaef0d83fb2618126067db/icons/iconmonstr-time-19.svg" alt="timer" srcset="" class="icon">
        <h3 data-target="15000" class="count">0</h3>
        <h6>Work Hours</h6>
      </div>
      <div class="counter">
        <img src="https://raw.githubusercontent.com/nemo0/animated-counter/29e12c0cb15e90c27faaef0d83fb2618126067db/icons/iconmonstr-coffee-11.svg" alt="Coffee" srcset="" class="icon">
        <h3 data-target="1200" class="count">0</h3>
        <h6>Cups of Coffee</h6>
      </div>
      <div class="counter">
        <img src="https://raw.githubusercontent.com/nemo0/animated-counter/29e12c0cb15e90c27faaef0d83fb2618126067db/icons/iconmonstr-weather-112.svg" alt="night" srcset="" class="icon">
        <h3 data-target="500" class="count">0</h3>
        <h6>Sleepless Nights</h6>
      </div>
    </div>
  </div>

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

</html>

Step - 3: Below is the CSS code for styling.

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Nunito", sans-serif;
  background: #f6f7fc;
}
.container {
  width: 80%;
  margin: auto;
}
.heading {
  text-align: center;
  font-size: 3.5rem;
  font-weight: bold;
  padding: 5rem 0;
}
.counter-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.counter {
  text-align: center;
}
.counter h3 {
  padding: 0.5rem 0;
  font-size: 2.5rem;
  font-weight: 800;
}
.counter h6 {
  font-size: 1.5rem;
  padding-bottom: 1rem;
}
.icon {
  height: 5rem;
  width: auto;
}

Step - 4: Below is the JavaScript code which is the most important part in this Animation. Here, we're getting the contents of the class 'count' into the variable 'counters' and setting the speed to 200ms in the 'speed variable'. Then we are incrementing the value from 0 using forEach loop.

JS

const counters = document.querySelectorAll(".count");
const speed = 200;

counters.forEach((counter) => {
  const updateCount = () => {
    const target = parseInt(+counter.getAttribute("data-target"));
    const count = parseInt(+counter.innerText);
    const increment = Math.trunc(target / speed);
    console.log(increment);

    if (count < target) {
      counter.innerText = count + increment;
      setTimeout(updateCount, 1);
    } else {
      count.innerText = target;
    }
  };
  updateCount();
});

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

animationJavaScriptHTML5contentWeb Development