Counter in JavaScript with source code

Counter in JavaScript with source code

Introduction

Counter project is a counting number-based web project. This project deals with displaying counting number animation. It is coded in HTML5, CSS, and JavaScript.

In this tutorial, we will be creating counting numbers showing the current status. First, we need to create a folder with html, css, and js files. This type of counting number can be seen in different types of websites. These counting number determines the current number of different fields. Such as total employee, no of codes, awards, and many more.

We are using a container that includes icons and text. We will be using font awesome icons. The project is responsive from small to large devices. This project is showing total followers of different social media. The speed of counting numbers can be changed via JavaScript code. You need to run the index.html file in the browser to run the project. See the screenshot below.

counter - image 1

Counter project source codes

HTML

HTML will be used for displaying a icons and text on the screen. We are using font-awesome icons for this. We will be using social medias icons only in this project.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>Counter</title>
</head>
<body>
    <div class="counter-container">
      <i class="fab fa-twitter fa-3x"></i>
      <div class="counter" data-target="12000"> </div>
      <span>Twitter</span>
    </div>

    <div class="counter-container">
      <i class="fab fa-facebook fa-3x"></i>
      <div class="counter" data-target="10000"> </div>
      <span>Facebook</span>
    </div>

    <div class="counter-container">
      <i class="fab fa-tiktok fa-3x"></i>
      <div class="counter" data-target="20000"> </div>
      <span>Tiktok</span>
    </div>

    <div class="counter-container">
      <i class="fab fa-instagram fa-3x"></i>
      <div class="counter" data-target="15000"> </div>
      <span>Instagram</span>
    </div>

    <div class="counter-container">
      <i class="fab fa-youtube fa-3x"></i>
      <div class="counter" data-target="32600"> </div>
      <span>You tube</span>
    </div>

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

CSS

We will be using CSS for styling the whole project. Such as background colour, icons, text, aligning, flex-items, colours and many more.

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

* {
    box-sizing: border-box;
}

body {
  font-family: 'Roboto Mono', sans-serif;
  background-color: rgb(68, 146, 214);
  color: aliceblue;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;

}

.counter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 30px 50px;
  font-weight: 700;

}

.counter {
  font-size: 60px;
  margin-top: 10px;
  font-weight: 500;
}

@media(max-width: 580px) {
  body {
    flex-direction: column;
  }
}

JAVASCRIPT

The JavaScript code is added for making counting number. The special animation is added from JavaScript code. The speed of the numbers can be increased or decreased. Check the js code below.

script.js

const counters = document.querySelectorAll('.counter')
counters.forEach(counter => {
    counter.innerText = '0'
    const updateCounter = () => {
        const target = +counter.getAttribute('data-target')
        const c = +counter.innerText
        const increment = target / 1000

        if(c < target) {
            counter.innerText = `${Math.ceil(c + increment)}`
            setTimeout(updateCounter, 1)
        } else {
            counter.innerText = target
        }
    }
    updateCounter()
})

Although the code is provided in this tutorial. You can click the button below to get the full source code and see the demo of this project.

Spread the love