Reusable JS Notification System with DOM Manipulation

One underrated part of building modern web applications is feedback. The little details, like pop-up messages or toast alerts, let users know when something goes right or wrong. Many developers reach for libraries like SweetAlert or Toastify early on, but building your own notification system is a great way to test your understanding of DOM manipulation and architecture.

In this article, I’ll walk you through how I built a modular, flexible notification system using JavaScript and the DOM. No frameworks, no dependencies — just solid design choices and problem-solving.

💡 Why Build It Yourself?

Reinforces your knowledge of the DOM
Keeps your project lightweight
Gives you full control over styling and behavior
Easy to reuse across future projects
Demonstrates problem-solving and architectural thinking

🧱 The Architecture

Here’s the structure of the notification module:

jsCopyEdit// notifications.js
const NotificationSystem = (() => {
  const containerId = 'toast-container';

  const createContainer = () => {
    if (!document.getElementById(containerId)) {
      const container = document.createElement('div');
      container.id = containerId;
      container.style.position = 'fixed';
      container.style.top = '20px';
      container.style.right = '20px';
      container.style.zIndex = '1000';
      document.body.appendChild(container);
    }
  };

  const show = (message, type = 'info', duration = 3000) => {
    createContainer();
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.innerText = message;

    toast.style.cssText = `
      margin-bottom: 10px;
      padding: 12px 18px;
      background: ${type === 'success' ? '#4caf50' : type === 'error' ? '#f44336' : '#2196f3'};
      color: white;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      font-family: sans-serif;
      transition: all 0.3s ease;
    `;

    document.getElementById(containerId).appendChild(toast);

    setTimeout(() => {
      toast.style.opacity = '0';
      toast.style.transform = 'translateX(100%)';
      setTimeout(() => toast.remove(), 500);
    }, duration);
  };

  return { show };
})();

⚙️ How to Use It

You can call it anywhere like this:

jsCopyEditNotificationSystem.show('This is a success message!', 'success');
NotificationSystem.show('Something went wrong...', 'error');

🧠 Improvements You Can Add

Support for dark mode or theming
Queued notifications with animation delays
Click-to-dismiss or swipe support
Accessibility improvements
Logging or analytics hooks for tracking usage

✍️ Final Thoughts

This notification system started as a way to improve user interaction in a basic CRUD app. Over time, I refactored it into a standalone utility that I now plug into multiple projects. It’s lightweight, functional, and adaptable to different use cases.

Building a Reusable Notification System with JavaScript and the DOM