How to Create Counter Using HTML?
Hello Coder! Welcome to the Codewithrandom blog. In this blog, We learn How to Create a Counter Using HTML, CSS, and JavaScript with Code. When you scroll Countdown start and Number Increment, and end on the number that we put in Html. You can change the Number of countdown increase or decreases and the countdown end where you want.
50+ HTML, CSS & JavaScript Projects With Source Code
Counters are used in websites like e-commerce platforms where users can increase the number of goods, as well as in the administrative dashboard of any website where the developer can monitor website traffic.
I hope you enjoy our blog so let’s start with a basic Html structure for an Increment Counter.
Counter Html Code:-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Increment Counter</title> </head> <body> <div class="counter-container"> <i class="fab fab fa-instagram fa-3x"></i> <div class="counter" data-target="54600"></div> <span>instagram Followers</span> </div> <div class="counter-container"> <i class="fab fa-youtube fa-3x"></i> <div class="counter" data-target="300"></div> <span>YouTube Subscribers</span> </div> <div class="counter-container"> <i class="fab far fa-eye fa-3x"></i> <div class="counter" data-target="50000"></div> <span>Website visitor</span> </div> <script src="script.js"></script> </body> </html>
We must include a few crucial links inside our html files in order to add the framework for our increment counter. Since CSS and JavaScript were used separately in this instance, we must connect to them in our HTML; their link must be added inside the head tag. Additionally, we used some icons for our project, so we also need to include the font-awesome URL for those.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script>
Now inside the body using the div tag, we will first create the container for our counter and using the <i> class, we will add the icon for Instagram, and then we will create the a section to display the follower on Facebook similarly, we will add the icon for Instagram, YouTube, and an eye icon for the website visitor.
5 Star Rating with HTML and CSS (Source Code)
The increase counter’s entire HTML code is present. You can now view results devoid of CSS and JavaScript. Then, we use JavaScript to animate the increment counting numbers and create CSS code to style the increment counter icon and font.
Responsive Login Page in HTML with CSS Code
Html Code Output:-
CSS Code For Counter:-
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #8e44ad;
color: #fff;
font-family: 'Roboto Mono', sans-serif;
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;
}
.counter {
font-size: 60px;
margin-top: 10px;
}
@media (max-width: 580px) {
body {
flex-direction: column;
}
}Step1:Before setting the box-sizing to “border-box” with the universal selector, we will first use the import link to add a few Google fonts to our increment counter.
The background color property will now be used to set the background to “purple” using the body element selector, and the font-color property will be used to set the font color of our increment counter to “white”. Then, we will center all of the items using some of the fundamental properties like align item.
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #8e44ad;
color: #fff;
font-family: 'Roboto Mono', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
Show and Hide Password With Eye Icon using HTML & JavaScript
Step2: Now using the class selector (.counter-container) we will first set the display to flex and then using the flex-direction property we will set the flex direction as “column”,now using the text-align property all the text inside got aligned in the center.
Now using the class selector we will add the styling to the counter using the font-size property we will set the font size “60px” and using the margin top property we will set a top margin 10px.
.counter-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 30px 50px;
}
.counter {
font-size: 60px;
margin-top: 10px;
}
Step3:Our increment counter will now have responsiveness added using the media query attribute. We will specify the utmost screen width by means of the media query property. The image will instantly resize to fit the available space if the screen size drops below that.
@media (max-width: 580px) {
body {
flex-direction: column;
}
}
Now we have completed our Increment Counter Css and Create Number Counter Responsive Too. Here is our updated output HTML +CSS.
ADVERTISEMENT
Output
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Tic Tac Toe Game Using HTML,CSS and JavaScript
ADVERTISEMENT
Now add JavaScript Code for the Increment Counter Number Animation, We use Data Target to reach the final counting animation.
JavaScript Code For Counter:-
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 / 200
if(c < target) {
counter.innerText = `${Math.ceil(c + increment)}`
setTimeout(updateCounter, 1)
} else {
counter.innerText = target
}
}
updateCounter()
})Inside javascript first of all using the document.queryselectorAll method we will select the html element and then using the const keyword we will create a variable counter which will store the value of the increment counter and then using the counter.innerText property we will set the counter value to “0” and then we will create a function to update the counter value and then using the .innerText property we will display the updated value on the browser.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
this is the javascript code for the Increment Counter project. we create a function in javascript that increase the count and updated it every second. and Thats How our Increment Counter is Made.
Video Output:
Final Output Counter Using HTML and JavaScript:-
Gym Website Using HTML and CSS With Source Code
Now we have completed our Counter Project Using JavaScript. I hope you like Increment Counter Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
What is an increment counter?
The increment counter is the property that is used to measure the value and update it each time the counter’s value is updated.Almost every website employs an increment monitor to track the number of visitors to the site.
What are the elements required to create increment counter?
The elements needed to make the increment counter here are the same ones we used to count Instagram, YouTube, and Facebook followers. We used icons and div to build the container for displaying the counter value.
