Notification Toast System | HTML, CSS & JavaScript

Notification Toast System with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #09

Project Overview

The Notification Toast System is a beginner-friendly project built using HTML, CSS, and JavaScript. It displays small notification messages, commonly called toast notifications, to provide users with feedback after an action. These notifications can be used to show success messages, error messages, warnings, or general information.

The notification appears on the screen for a short period and can automatically disappear after a specified time. This project is useful for beginners who want to practice DOM manipulation, event handling, dynamic element creation and timers. It also demonstrates how reusable user interface components can improve the overall experience of a web application.

Key Features

Multiple notification types: The system can show various notification types (success, error, warning, info) depending on the action performed.
Dynamic toast creation: The toasts are created in JavaScript instead of having each notification hard-coded in HTML.
Automatic toast removal: Each toast is removed from the screen automatically after a certain period, without requiring the user to perform any interaction.
Customizable notification messages: Notifications can have different message depending on the situation, allowing for a great variety of messages and use cases.
Customizable notification styles: Each type of notification can have different colors, icons or borders, for easy differentiation between success, errors, warnings and regular notifications.
Multiple toasts: The system can handle multiple notifications on the screen at the same time, for example, when multiple actions are triggered.
Close button: Notifications can include a close button that allows users to manually remove a message before it disappears automatically.
Smooth Animation Effects: CSS animations or transitions can be used when a toast appears or disappears, creating a smoother and more modern user experience.
Fixed Notification Position: Toast messages can be positioned in a fixed area of the screen, ensuring they remain visible without affecting the main layout of the webpage.
Reusable Function: JavaScript functionality can be organized into a reusable function that accepts a message and notification type, making it easier to use throughout a larger application.
Responsive design: The notification can be responsive and readable on different screen sizes.

What You'll Learn

Understand how toast notifications work in web applications.
Learn how to create HTML elements dynamically using JavaScript.
Practice using document.createElement().
Understand how to add CSS classes dynamically.
Learn how to handle button click events.
Practice passing values to JavaScript functions.
Understand how setTimeout() can remove elements automatically.
Learn how to remove elements from the DOM.
Practice creating reusable JavaScript functions.
Understand how CSS animations and transitions improve user interfaces.

HTML Code

HTML creates the basic structure of the Notification Toast System. First, the style.css file is linked inside the <head> section so CSS can control the appearance, position, and animation of the notifications. The main content can contain buttons for displaying different types of notifications, such as Success, Error, Warning, or Information. Each button can include an identifier that helps JavaScript determine which notification should be displayed and a notification container is also included in the HTML. It provides a dedicated area where JavaScript dynamically adds toast messages when users perform an action.

Finally, the script.js file is loaded near the bottom of the <body> so JavaScript can access the buttons and notification container and provide the required toast functionality.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Notification Toast System</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="buttons">
    <button onclick="showToast('success')">Success</button>
    <button onclick="showToast('error')">Error</button>
    <button onclick="showToast('info')">Info</button>
  </div>

  <div class="toast-container" id="toastContainer"></div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the appearance and positioning of the Notification Toast System. The main notification container is usually positioned using position: fixed, allowing toast messages to appear in a consistent area of the screen without changing the layout of the main webpage. Each toast notification receives styling such as padding, spacing, background color, rounded corners, and a shadow. Different classes can be used for success, error, warning, and information notifications so each type has a visually distinct appearance.

CSS animations or transitions can control how the notification enters and leaves the screen. The close button can also be styled to make it easy for users to remove a notification manually. Responsive CSS rules help ensure that the notifications remain visible and readable on smaller screens.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042453;
}

.buttons button {
  margin: 0 5px;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #4f46e5;
  color: white;
}

/* Toast container */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
}

/* Toast */
.toast {
  min-width: 250px;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 8px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: slideIn 0.3s ease;
}

.toast.success { background: #22c55e; }
.toast.error { background: #ef4444; }
.toast.info { background: #3b82f6; }

.toast button {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Javascript Code

JavaScript provides the main functionality of the Notification Toast System. First, it selects the notification container and the buttons that trigger different notification messages. When a user clicks button, JavaScript calls a function that creates a new notification element using document.createElement(). The message and notification type are then added to the element, and the appropriate CSS class is applied.

A new toast notification is appended to the notification container so, it becomes visible on the webpage. A setTimeout() function can automatically remove the notification after a specified amount of time.

If the notification contains a close button, an additional click event allows users to remove the toast manually. This project demonstrates how JavaScript can dynamically create, display, and remove UI elements while CSS controls their appearance and animations.

const toastContainer = document.getElementById("toastContainer");

function showToast(type) {
  const toast = document.createElement("div");
  toast.classList.add("toast", type);

  let message = "";
  if (type === "success") message = "Action successful!";
  if (type === "error") message = "Something went wrong!";
  if (type === "info") message = "Here is some information.";

  toast.innerHTML = `
    <span>${message}</span>
    <button onclick="this.parentElement.remove()">×</button>
  `;

  toastContainer.appendChild(toast);

  // Auto remove after 3s
  setTimeout(() => {
    toast.remove();
  }, 3000);
}