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 this counter project. See the screenshot below.
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 counter 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 counter 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.