Notification Toast System | HTML, CSS & JavaScript

Notification Toast System with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #09

Project Overview

A Notification Toast System built using HTML, CSS, and JavaScript that provides instant feedback to users through small, temporary notification messages.
The system displays alerts for different actions such as success, error, or informational updates, improving user experience without interrupting the workflow.

Key Features

Displays non-intrusive notification toasts.
Supports multiple toast types (success, error, info).
Auto-dismiss notifications after a set duration.
Manual close option for user control.
Smooth entry animations for better visual feedback.
Stackable toasts without overlapping.
Clean, reusable, and responsive design.

HTML Code

<!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

* {
  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

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);
}