DEV Community

Cover image for Let's count to 9 using javascript and CSS
Arvind
Arvind

Posted on

8 2

Let's count to 9 using javascript and CSS

I was scrolling through Instagram and found a cool number counter, I thought they made it in javascript but after looking at hashtags #3dmax #animation I came to know it was made in 3D software. I was like, why not remake it in javascript (just for fun). After I created the animated counter, I shared it on my Instagram and got very positive reviews and many for the followers were asking for code and tutorials.

Creating the structure

The HTML structure is composed of 15 circles divs wrapped in a div, each row contains 3 circle divs so that we can show the numbers accurately

    
    <div class="container">
      
      <div class="circle"></div>
      <div class="circle"></div>
      ...

    </div>
    

Adding styles

I've kept this code simple so that readers can understand it easily, in CSS all I did is made 2 states of the circle, one is smaller grey in color which donates the inactive state and the second one is the .active class which makes the div bigger in size and colored to indicate the active state of the circle

    
        .circle{
          width: 60px;
          height: 60px;
          background-color: #536dfe;
          border-radius: 50%;
          display: inline-block;
          transform: scale(.2);
          background-color: #c4c4c4;
          transition: transform 1s ease-in-out;
        }

        .circle.active{
          transform: scale(1);
          background-color: #536dfe;
        }
    

Events handling

First of all, we need to define the pattern of each number so that it can change the DOM accordingly. What I did is, made an array and defined each number's pattern as shown below.

    
        var num_pattern = [
                  [ 
                    1, 1, 1,
                    1, 0, 1,
                    1, 0, 1,        //For 1
                    1, 0, 1,
                    1, 1, 1
                  ],
                  [
                    1, 1, 1,
                    0, 0, 1,
                    1, 1, 1,        //For 2
                    1, 0, 0,
                    1, 1, 1
                  ]
                  ...
            ];
    

0 indicates the inactive state and 1 indicates the active state

the main concept here is, each 0 and 1 in the pattern donates each element in the DOM. So if there is 1 in the 3rd index of an array, the 4th circle will be active ( Don't get confused here, Array starts from 0 😜)

now we have to change the number on every second so setTimeInteval will do the job. On every second we increment the number and check the number pattern in the array and update the DOM.

    
        var circles = document.querySelectorAll('.circle');
        var i = 0;

        setInterval(function(){
          incNum();
          // Increment the number at every 1 second
          i++;
        }, 1000);

        function incNum(){
          // Reset the counter when it reaches > 9
          if(i == 10) i = 0;

          for(z = 0; z < num_pattern[i].length; z++){
            if(num_pattern[i][z]){
              //If it has '1' then make the circle active
              //Check if the circle is already active
              if(!circles[z].classList.contains('active')){
                circles[z].classList.add("active");
              }
            } else {
              if(circles[z].classList.contains('active')){
                circles[z].classList.remove("active");
              }
            }
          }
        }
    

Note: Here we're only updating the DOM if required, this also gives the sweet effect to the animation

See the demo here

Note: This article was originally posted on my startup blog

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay