How to count number of notification on an icon?
Bootstrap provides us with badges to display counts on an icon which can be used to show unread notifications/messages etc. We need to get the value of count on the icon badge and update that value accordingly. In this article, we will create a notification icon that can hold the counting like unread notification does. We will divide this into two different sections in the first section we will create the structure of the icon and in the second section, we will design the icon and make the icon responsive.
Approach: We will proceed with the following steps to ensure that we can always get the notification number/badge count for the icon irrespective of the DOM structure.
- Wrapping the icon and badge under same element.
- Using jQuery find() function to extract the count.
- Increase/Decrease the count of the badge from the extracted value.
- Update the value.
Creating Structure: Below is a sample code which we’ll be using as a template. Finally, we’ll apply jQuery as per the problem statement for the following.
- CDN links for the Icons from the Font Awesome:
- HTML code:
Designing Structure: In this section, we will design the structure and make the icon responsive as well.
- CSS code:
Note: Later we will group this by chaining to apply jQuery on the badge irrespective of the developer’s implementation for the same.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.