DEV Community

Danial Habib

Posted on Nov 23, 2023

Responsive Number Counting Animation With JavaScript Project With Source Code

#javascript #webdev #programming #tutorial

Hello and Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a responsive count up animation. To create this project, we need HTML, CSS and Javascript.

The count up animation consists of four boxes that contain numbers that count up to a certain end value. It also contains an icon and a title. Let us get started with the tutorial.

Video Tutorial:

I have a video version of this tutorial on my youtube channel. If you would like to code along with me you can check it out here down below. Also, I regularly post new tutorials on my youtube channel. So be sure to subscribe to my youtube channel so you won’t miss any tutorials.

Project Folder Structure:

We begin by taking a look at the project folder structure. The project folder is called Count Up Animation. Within this folder, we have three files- index.html, style.css and script.js. These files are HTML document, stylesheet and script file respectively.

HTML:

We begin with the HTML code. The HTML code consists of a div with a class name wrapper. Inside the wrapper, we have four divs with the class container.

Now each of these divs contains an icon followed by two span elements. The first span element has a ‘data-*’ attribute. We set the value of this attribute to the end value of the count.
The second span element consists of titles for each of the counts.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Count Up Animation</title>
    <!-- FontAwesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <i class="fas fa-utensils"></i>
        <span class="num" data-val="400">000</span>
        <span class="text">Meals Delivered</span>
      </div>

      <div class="container">
        <i class="fas fa-smile-beam"></i>
        <span class="num" data-val="340">000</span>
        <span class="text">Happy Customers</span>
      </div>

      <div class="container">
        <i class="fas fa-list"></i>
        <span class="num" data-val="225">000</span>
        <span class="text">Menu Items</span>
      </div>

      <div class="container">
        <i class="fas fa-star"></i>
        <span class="num" data-val="280">000</span>
        <span class="text">Five Stars</span>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Let us style this counter and make it responsive using CSS.

We start by removing the paddings and margins from all the elements. Next, we set the background colour of our document body to ‘#121317’.

Next, we centre the count boxes by centring the wrapper using transforms. Also, we using a flex layout to space and position the container elements.

We again use a flex layout to place the items inside the container in a column. In the next step, we style the icon and the number value. We also style the titles for each of these. You can style them as per your liking.

Lastly, we add media queries to make these containers responsive. We use three breakpoints. The first is at 1024px. Here the size of the wrapper is slightly increased whereas that of the container is decreased.

The second one is at 768px here the wrapper collapses into two columns. And finally at 480px when where the wrapper collapses into one single column to fit the mobile devices.



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #121317;
}
.wrapper {
  position: absolute;
  width: 80vw;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
.container {
  width: 28vmin;
  height: 28vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  background-color: #21242b;
  border-bottom: 10px solid #18f98f;
}
i {
  color: #18f98f;
  font-size: 2.5em;
  text-align: center;
}
span.num {
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 3em;
}
span.text {
  color: #e0e0e0;
  font-size: 1em;
  text-align: center;
  pad: 0.7em 0;
  font-weight: 400;
  line-height: 0;
}
@media screen and (max-width: 1024px) {
  .wrapper {
    width: 85vw;
  }
  .container {
    height: 26vmin;
    width: 26vmin;
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    width: 90vw;
    flex-wrap: wrap;
    gap: 30px;
  }
  .container {
    width: calc(50% - 40px);
    height: 30vmin;
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .wrapper {
    gap: 15px;
  }
  .container {
    width: 100%;
    height: 25vmin;
    font-size: 8px;
  }
}

JavaScript:

We now add functionality to this counter using JavaScript. We select the num divs and assign them to a variable called value displays. Also, we set the interval to 4000.

Now we loop over each of the num div. For each of them, we create a variable start value. We create a variable called endValue which takes the value of the ‘data-val’ attribute. We create a duration variable whose value is calculated using interval and endValue.

We create a function called counter that runs after every ‘duration’ seconds. Each time the function is called the startValue increases by one. This is done until the startValue becomes equal to the endValue. We also change the text content of the valueDisplay to the startValue.



let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function () {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

Our count up animation is now ready. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also if you have any suggestions drop them in the comments.

Download Code