How to count number of notification on an icon? - GeeksforGeeks

09 Aug, 2021
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:  
<script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js”></script>  
HTML code:  
HTML
<!-- Final Solution --><!DOCTYPE html><html lang="en"> <head>    <meta charset="utf-8">    <meta name="viewport"          content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js">    </script></head> <body>    <div class="container-fluid">        <br>        <br>        <center>            <h1>GeeksforGeeks</h1>            <h4>Icon with count Badge:                <!-- Wrapping the icon and badge -->               <span id="group">                 <button type="button" class="btn btn-info">                  <i class="fa fa-envelope"></i>                 </button>                 <span class="badge badge-light">5</span>               </span>            </h4>            <br>            <br>            <button class="btn btn-danger">                <i class="fas fa-minus"></i>              Subtract            </button>            <button class="btn btn-success">                <i class="fas fa-plus"></i>              Addition            </button>        </center>    </div></body>  </html>
Designing Structure: In this section, we will design the structure and make the icon responsive as well.  
CSS code:  
CSS
<style>    h1 {        color:green;       }   .badge {        position: relative;        top: -20px;        left: -25px;        border: 1px solid black;        border-radius: 50%;       }    button {        margin:5px;       }</style>
JavaScript code: The implementation of the approach is purely dependent on the developer and the DOM structure depends upon the use-case required. It is not necessary developer groups the badge in the same element as the icon.  
javascript
<script>       // Use find() function to extract the badge    // count from '#group' container.    $(document).ready(function() {        $(".btn").click(function() {            var val = parseInt($('#group').find('.badge').text());             // Check for the button clicked            if ($(this).hasClass('btn-danger')) {                $('#group').find('.badge').text(val - 1);            } else if ($(this).hasClass('btn-success')) {                $('#group').find('.badge').text(val + 1);            }        });    });</script>
Note: Later we will group this by chaining to apply jQuery on the badge irrespective of the developer’s implementation for the same.Combining HTML, CSS and JavaScript Code: This is the final code that is the combination of the above two sections creating structure and designing structure.  
html
<!-- Final Solution --><!DOCTYPE html><html lang="en"> <head>    <meta charset="utf-8">    <meta name="viewport"          content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js">    </script>    <style>        h1 {            color:green;        }        .badge {            position: relative;            top: -20px;            left: -25px;            border: 1px solid black;            border-radius: 50%;        }        button {            margin:5px;        }    </style></head> <body>    <div class="container-fluid">        <br>        <br>        <center>            <h1>GeeksforGeeks</h1>            <h4>Icon with count Badge:                <!-- Wrapping the icon and badge -->               <span id="group">                 <button type="button" class="btn btn-info">                  <i class="fa fa-envelope"></i>                 </button>                 <span class="badge badge-light">5</span>               </span>            </h4>            <br>            <br>            <button class="btn btn-danger">                <i class="fas fa-minus"></i>              Subtract            </button>            <button class="btn btn-success">                <i class="fas fa-plus"></i>              Addition            </button>        </center>    </div></body><script>       // Use find() function to extract the badge    // count from '#group' container.    $(document).ready(function() {        $(".btn").click(function() {            var val = parseInt($('#group').find('.badge').text());             // Check for the button clicked            if ($(this).hasClass('btn-danger')) {                $('#group').find('.badge').text(val - 1);            } else if ($(this).hasClass('btn-success')) {                $('#group').find('.badge').text(val + 1);            }        });    });</script> </html>               
Output:  
 
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
anikakapoor
Bootstrap-Misc
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
Technical Scripter 2019
CSS
HTML
JQuery
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
Types of CSS (Cascading Style Sheet)
How to Insert Form Data into Database using PHP ?