Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to count the number of notifications on an icon?
A notification icon is a common UI feature in modern web applications that displays the count of pending notifications. This feature can be implemented using HTML, CSS, JavaScript, and Bootstrap to create an interactive notification system with a badge counter.
Required CDN Links
To build this notification counter, we need to include the following CDN links in our HTML document
Font Awesome CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
Bootstrap CDN
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
HTML Structure
The notification icon consists of a button with a bell icon and a badge counter. The notifications are displayed in a list group that can be shown or hidden
Notification Icon Button
<button type="button" class="btn btn-success position-relative m-3">
<i class="fa fa-bell" aria-hidden="true"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill">
<span id="output" class="badge rounded-pill bg-danger">0</span>
</span>
</button>
Notifications Container
<ul class="list-group container" style="display: none;" id="notis"></ul>
Control Buttons
<button class="btn btn-success ms-3 mt-3" onclick="showNoti()">Show Notifications</button> <button class="btn btn-danger mt-3" onclick="clearAll()">Remove Notification</button>
JavaScript Implementation
The JavaScript code manages the notification array and updates the UI accordingly
Initialize Notifications Array
var Notifications = [ "New Article added", "User login Failed", "Article was successfully promoted", "Device was found at 127.0.0.1", "New login alert" ];
Display Notifications Function
showNoti = () => {
var noti = document.getElementById("notis");
noti.innerHTML = ""; // Clear existing notifications
// Populate notifications
for (var n = 0; n < Notifications.length; n++) {
var listItem = '<li class="list-group-item bg-light ms-3 my-2 rounded">' +
Notifications[n] + '</li>';
noti.innerHTML += listItem;
}
// Update counter and show notifications
document.getElementById("output").innerText = Notifications.length;
if (Notifications.length == 0) {
alert("No notification found");
} else {
noti.style.display = "block";
}
}
Clear Notifications Function
clearAll = () => {
if (Notifications.length == 0) {
alert("No notification found");
return;
}
// Remove one notification
Notifications.pop();
document.getElementById("output").innerText = Notifications.length;
// Hide notifications if empty
if (Notifications.length == 0) {
document.getElementById("notis").style.display = "none";
} else {
showNoti(); // Refresh display
}
}
Complete Example
Following is the complete implementation of a notification counter system
<!DOCTYPE html>
<html>
<head>
<title>Notification Counter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="container" style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Notification System</h2>
<!-- Notification Icon -->
<button type="button" class="btn btn-success position-relative m-3">
<i class="fa fa-bell" aria-hidden="true"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill">
<span id="output" class="badge rounded-pill bg-danger">5</span>
</span>
</button>
<!-- Notifications List -->
<ul class="list-group container" style="display: none;" id="notis"></ul>
<!-- Control Buttons -->
<div>
<button class="btn btn-success ms-3 mt-3" onclick="showNoti()">Show Notifications</button>
<button class="btn btn-danger mt-3 ms-2" onclick="clearAll()">Remove Notification</button>
<button class="btn btn-info mt-3 ms-2" onclick="addNotification()">Add Notification</button>
</div>
<script>
var Notifications = [
"New Article added",
"User login Failed",
"Article was successfully promoted",
"Device was found at 127.0.0.1",
"New login alert"
];
// Initialize counter on page load
document.getElementById("output").innerText = Notifications.length;
showNoti = () => {
var noti = document.getElementById("notis");
noti.innerHTML = ""; // Clear existing notifications
// Populate notifications
for (var n = 0; n < Notifications.length; n++) {
var listItem = '<li class="list-group-item bg-light ms-3 my-2 rounded">' +
Notifications[n] + '</li>';
noti.innerHTML += listItem;
}
// Update counter and show notifications
document.getElementById("output").innerText = Notifications.length;
if (Notifications.length == 0) {
alert("No notifications found");
noti.style.display = "none";
} else {
noti.style.display = "block";
}
}
clearAll = () => {
if (Notifications.length == 0) {
alert("No notifications found");
return;
}
// Remove one notification
Notifications.pop();
document.getElementById("output").innerText = Notifications.length;
// Refresh display or hide if empty
if (Notifications.length == 0) {
document.getElementById("notis").style.display = "none";
} else {
showNoti(); // Refresh display
}
}
addNotification = () => {
var newNotification = "New notification " + (Date.now() % 1000);
Notifications.push(newNotification);
document.getElementById("output").innerText = Notifications.length;
// If notifications are currently shown, refresh the display
if (document.getElementById("notis").style.display === "block") {
showNoti();
}
}
</script>
</body>
</html>
The output shows a notification bell icon with a red badge displaying the count. Clicking "Show Notifications" reveals the list, "Remove Notification" decreases the count, and "Add Notification" increases it
Notification System ? 5 [Show Notifications] [Remove Notification] [Add Notification] (When "Show Notifications" is clicked, a list appears below showing all notifications)
How It Works
The notification system works through the following process
Initialization The notifications array is populated with sample data, and the badge counter displays the initial count.
Show Notifications The
showNoti()function iterates through the array and dynamically creates list items to display each notification.Remove Notifications The
clearAll()function removes one notification at a time using thepop()method and updates the counter.Dynamic Updates The badge counter updates in real-time as notifications are added or removed.
Key Features
Real-time Counter The badge displays the exact number of notifications in the array.
Dynamic Display Notifications can be shown or hidden based on user interaction.
Interactive Management Users can add or remove notifications, with the counter updating automatically.
Bootstrap Styling Uses Bootstrap classes for consistent, responsive design.
Font Awesome Icons Includes the bell icon for visual appeal.
Practical Applications
This notification system can be enhanced for real-world applications by
API Integration Connect to backend APIs to fetch real notifications dynamically.
Real-time Updates Use WebSockets or Server-Sent Events for live notification updates.
Animations Add CSS animations and sound effects when notifications arrive.
Persistence Store notifications in localStorage or a
2K+ Views
