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:
<!-- 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>
|
Designing Structure: In this section, we will design the structure and make the icon responsive as well.
-
CSS code:
<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.
<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.
<!-- 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>
|
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.