🔔 Bell Notification Interface

A drop-in notification bell with an animated badge and a satisfying ring — in pure HTML, CSS, and vanilla JavaScript.

Zero build step, zero dependencies. Copy the three files into any page and you get a Font Awesome bell that rings and counts up every time a notification arrives.

---

Table of Contents

• Overview
• Features
• Tech Stack
• How It Works
• Getting Started
• Usage
• Project Structure
• Customization
• Browser Support
• Contributing
• Author
• License

---

Overview

Bell Notification Interface is a small, self-contained front-end component that recreates the familiar notification bell you see in social apps and dashboards. A click feeds a notification into the bell, the unread counter animates up inside a red badge, and the bell swings through a hand-tuned keyframe sequence. Everything is done with CSS pseudo-elements and a handful of JavaScript, so it is easy to read, easy to restyle, and easy to embed anywhere.

---

Features

• 🔔 Font Awesome bell rendered entirely through a CSS ::before pseudo-element
• 🔢 Animated badge counter driven by a data-count attribute and a ::after pseudo-element
• ⚡ Realistic ring from a 9-step @keyframes bell swing animation
• 🎯 Retrigger-safe — the animation restarts cleanly on every notification
• 🧹 Self-cleaning — the ring class is removed on animationend
• 📦 Zero dependencies and no build step — three plain files
• 🧩 Drop-in reusable component for any website

---

Tech Stack

Technology	Role
HTML5	Bell container and trigger button
CSS3	Pseudo-element rendering, badge, and the ring animation
JavaScript (ES6)	Counter state, badge updates, and animation triggering
Font Awesome 6 (CDN)	The bell glyph

---

How It Works

• The bell icon is drawn by .notification::before using the Font Awesome solid glyph \f0f3.
• The unread badge is .notification::after, whose text is content: attr(data-count); it is hidden by default and fades and scales in once the count class is present.
• Clicking the button increments an internal counter, writes it to data-count, and adds the count and notify classes.
• The notify class applies the bell keyframe animation to the icon. A forced reflow restarts the animation on every click, and an animationend listener removes the class so the bell is ready to ring again.

---

Getting Started

Open index.html directly in a browser, or serve the folder over HTTP for an environment closest to production:

python -m http.server 8080

Then visit http://localhost:8080.

---

Usage

The markup and behaviour are tiny. A button click feeds a notification to the bell:

<div class="container">
  <div class="notification" id="_notification"></div>
  <button class="button" id="_button">Notify Me</button>
</div>

const notification = document.getElementById("_notification");
const button = document.getElementById("_button");
let count = 0;

button.addEventListener("click", () => {
  count += 1;
  notification.setAttribute("data-count", count);
  notification.classList.add("count");
  notification.classList.remove("notify");
  void notification.offsetWidth;
  notification.classList.add("notify");
});

To drive the bell from real events instead of a button, call the same body from anywhere, for example when data arrives over a WebSocket or a polling request.

---

Project Structure

Bell-Notification-Interface-HTML-CSS-JAVASCRIPT/
├── index.html
├── style.css
├── index.js
├── LICENSE
└── README.md

---

Customization

• Badge color — change background-color on .notification::after
• Bell size and color — adjust font-size and color on .notification::before
• Ring intensity — edit the rotation angles in @keyframes bell
• Trigger source — replace the button click handler with any real notification event

---

Browser Support

Works in all modern evergreen browsers (Chrome, Edge, Firefox, Safari). Font Awesome is loaded from the cdnjs CDN, so an internet connection is required for the bell glyph.

---

Contributing

Contributions are welcome.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m "Add amazing feature")
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

Author

Created by Kumar44developer.

---

License

Distributed under the MIT License. See LICENSE for more information.