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:

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js”></script>

  • HTML code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- 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=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </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>

    chevron_right

    
    

Designing Structure: In this section, we will design the structure and make the icon responsive as well.

  • CSS code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        h1 {
            color:green;
           }
       .badge {
            position: relative;
            top: -20px;
            left: -25px;
            border: 1px solid black;
            border-radius: 50%;
           }
        button {
            margin:5px;
           }
    </style>

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

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 craeting structure and designing structure.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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>                

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.