HTML Counter
On most websites, you have seen a counter section. It tells the users how well the business is going on. This section contains the number of interests, visit, likes, and many more things and shows to the visitors. This counter increases as the interest and visit of the user increases.
Mostly, this counter section is added at the bottom of the webpage (in the footer). It contains the growth details of the website that how good or bad your business is growing on. This counter increases as the growth of the business increases. You have seen the HTML counter as shown below at the footer of websites most of the time.
Using HTML, you can create the frontend for this counter and use JavaScript to dynamically fetch and count the visitors in real-time. We will predict the website data on behalf of the user and visitor.
In this chapter, we will divide the counter creation process in two sections. In the first section, we will work on simple counter designing and, in another section, we will work on CSS designing of the counter. You will see different examples in this chapter.
Steps to create HTML counter
Here, we have a few steps to create a static counter using HTML and CSS. Follow the given steps below:
Step 1: Create the simple structure using HTML <div> tags.
Step 2: Add CSS to make the counter more attractive.
Step 3: To add the small icons (like suitcase, coffee-cup, Smylie, user icon, book and more) with the counter, use the bootstrap cdn link and code.
Step 4: For the bootstrap cdn code, click on the following link https://www.bootstrapcdn.com/fontawesome/ and get the Font Awesome code from here.
Step 5: Copy this Font Awesome CSS link from here and paste inside the <link> tab in href parameter. Add this inside the <head> in HTML code.
For example –
Step 5: Besides this, you also need to add one more code inside the <body> tag to add the icon with the particular counter.
Step 6: Now, to get different icons, go to font awesome icon (https://fontawesome.com/v4.7.0/icons/). Here, you will get thousands of icons where select one of the icons you want to add and get the code for them.
For example, we will add a suitcase button. Search for the suitcase icon in search bar icons and get the code.
Step 7: Copy the code from here and paste it where you want to add this icon. You can remove the unnecessary code from it.
You can also write this code only as given below.
Copy suitcase icon code:
Now, look at the below HTML and CSS code to add and design the counter section.
Create the structure of counter
Here, we will use HTML code to create the simple counter design divided into four sections to display four different statistics of the website. For this example, we will use fontawesome icons to represent different functions.
Add the following link to your code for styling the icons and awesome font.
CDN link for awesome font and icons:
Example
This is a simple example of static counter using simple HTML designing. In this example, value of the counter is set by the web developer, so it will not change. These values can be changed only from the HTML code.
HTML code example
Output
Execute the code and get the counter added at the bottom of the webpage. It will show a simple counter with their icon, as shown in the output below:
CSS code example
Now, we will create the CSS to use with the above code for styling the counter section. This code will help to make the counter structure design more attractive by providing styling.
Complete Code for Counter section with CSS
Combine both HTML and CSS code and make a complete code of the counter section. See the result of how HTML code will work after adding CSS styling in it.
Copy Code
Output
When you will save and execute this code on the web browser, you will get the counter is added to the webpage. See the screenshot for the above code response on Google Chrome:
We have used the hover effect on these counter boxes. So, when you take the mouse over any of these counter boxes, the color of that respective box will change with a transition effect. See the effects by yourself.
Note: Change the size of the screen and see the output for different screen sizes.
Example 2: HTML counter-up
This is another example of an HTML counter. We will now create an HTML counter whose counter will up till the number set by the developer. However, it is not a dynamic counter.
In this example, we will also provide background color and create four counter variables using HTML and CSS, displayed vertically.
Complete code
Look at the complete code of HTML counterUP below:
Copy Code
Output
Execute the above code and get the response as shown in the below screenshot:
Whenever you will run or refresh the page, this counter number will up till the number set the developer in code.
Explained steps for the above code
Here, we have few steps to create an HTML counter-up using HTML, CSS and adding few jquery code links. Follow the given steps below:
Step 1: Create the simple structure using the HTML <div> tags with class for styling.
Step 2: Add CSS to make the counter more attractive.
Step 3: To add the small icons (like suitcase, coffee-cup, Smylie, user icon, book and more) with the counter, use the bootstrap cdn link and code.
Step 4: For the bootstrap cdn code, click on the following link https://www.bootstrapcdn.com/fontawesome/ and get the Font Awesome code from here.
Step 5: Copy this Font Awesome CSS link from here and paste inside the <link> tab in href parameter. Add this inside the <head> in HTML code.
For example –
Step 5: Besides this, you also need to add one more code inside the <body> tag to add the icon with the particular counter.
Step 6: Now, to get different icons, go to font awesome icon (https://fontawesome.com/v4.7.0/icons/). Here, you will get thousands of icons where select one of the icons you want to add and get the code for them.
For example, we will add a suitcase button. Search for the suitcase icon in search bar icons and get the code.
Step 7: Copy the code from here and paste it where you want to add this icon. You can remove the unnecessary code from it.
You can also write this code only as given below.
Copy suitcase icon code:
Now, it’s time to add a few script links to the HTML code to make the counter up.
Add jquery link to HTML code
Step 8: Click here (https://code.jquery.com/) to get the code. Here, click on minified under JQuery 1.x as shown in the below screenshot:
You will get a code from here. Please copy the below code from here and paste it into the HTML code inside the <head> tag.
Step 9: Now, click here (https://github.com/bfintal/Counter-Up) and open the counter-up.js on github and download the zip file from here.
Step 10: Extract the zip file and copy the query.counterup.min.js JavaScript file from the extracted folder and paste it to the folder where your HTML file is stored.
Step 11: On the same page of github, scroll the page down. You will get two lines of script code under the Usage/Include section.
Copy and paste this code inside the <body> tag in your HTML code.
Copy code
Step 12: At the end, copy the following jQuery code and paste just below the in above step’s code.
Copy code
Note: To counter up the numbers, add a class with that number. For Example – <h4 class=”counter”> 150 </h4>