JavaScript Notes

JavaScript Toast Notification Project — Custom Alerts Tutorial 2026

Learn how to build a custom toast notification system in JavaScript from scratch. This beginner-friendly tutorial covers creating, positioning, animating, auto-dismissing, and stacking multiple toast alerts with complete source code.

Introduction

Toast notifications are small, non-blocking popup messages that appear briefly on screen to inform users about an action's result — like "File saved successfully" or "Error: Network failed." Unlike traditional alert() boxes, toast notifications don't interrupt the user's workflow.

In this project, you will build a complete toast notification system from scratch using vanilla JavaScript, HTML, and CSS. No libraries needed!

What you will learn:

Creating DOM elements dynamically with JavaScript
CSS animations for smooth enter/exit transitions
Using setTimeout for auto-dismiss functionality
Stacking multiple notifications without overlap

Note: In this tutorial we will build a custom toast notification system using JavaScript that can display success, error, warning, and info messages.

Toast Notification Types

Type	Color	Use Case	Icon
Success	Green (#4caf50)	Action completed	✓
Error	Red (#f44336)	Something failed	✗
Warning	Orange (#ff9800)	Caution needed	⚠
Info	Blue (#2196f3)	General info	ℹ

HTML Structure

html example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast Notification System</title>
</head>
<body>
    <div class="controls">
        <h1>Toast Notification System</h1>
        <button onclick="showToast('Operation successful!', 'success')">Success</button>
        <button onclick="showToast('Something went wrong!', 'error')">Error</button>
        <button onclick="showToast('Check your input.', 'warning')">Warning</button>
        <button onclick="showToast('New update available.', 'info')">Info</button>
    </div>

    <div id="toast-container"></div>
    <script src="script.js"></script>
</body>
</html>

The #toast-container is empty — JavaScript fills it dynamically. Each button calls showToast() with a message and type.

CSS — Styling and Animations

css example

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #fff;
}

.controls { text-align: center; }
.controls button {
    padding: 12px 24px;
    margin: 5px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    min-width: 300px;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: slideIn 0.4s ease forwards;
}

.toast .icon { font-size: 1.4rem; }
.toast .message { flex: 1; }
.toast .close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
}

.toast.success { background: #4caf50; }
.toast.error   { background: #f44336; }
.toast.warning { background: #ff9800; }
.toast.info    { background: #2196f3; }

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

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

.toast.exit { animation: slideOut 0.4s ease forwards; }

Animation logic: slideIn moves toast from off-screen right to its position. Adding .exit class triggers slideOut before removal.

JavaScript — Core Logic

Creating a Toast

Example

Removing a Toast with Animation

Example

function removeToast(toast) { if (!toast || toast.classList.contains('exit')) return; toast.classList.add('exit'); setTimeout(() => { toast.remove(); }, 400); }

Output

showToast('Saved!', 'success') →
  1. Green toast slides in from right
  2. Shows "✓ Saved!" with × button
  3. After 3 seconds, slides out and is removed from DOM

Auto-Dismiss with setTimeout

Example

// setTimeout schedules removeToast to run ONCE after delay setTimeout(() => { removeToast(toast); // Runs after 3000ms }, 3000);

Note: setTimeout sets a timer — after 3 seconds the toast will automatically disappear.

Stacking Multiple Toasts

Clicking multiple buttons rapidly creates independent toasts that stack:

javascript example

showToast('First notification', 'success');
showToast('Second notification', 'error');
showToast('Third notification', 'info');

Output

┌──────────────────────────┐  ← top-right corner
│ ✓ First notification   × │
├──────────────────────────┤
│ ✗ Second notification  × │
├──────────────────────────┤
│ ℹ Third notification   × │
└──────────────────────────┘
Each disappears independently after its own 3s timer.
When one is removed, others slide up via flexbox reflow.

Complete Working Code

html example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast Notification System</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', sans-serif;
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            background: #1a1a2e; color: #fff;
        }
        .controls { text-align: center; }
        .controls h1 { margin-bottom: 15px; }
        .controls button {

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Toast Notification Project — Custom Alerts Tutorial 2026.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, mini, projects, toast

Continue learning this concept

Mini ProjectsBuild a JavaScript Calculator - Step by Step Project TutorialLearn to build a fully functional calculator in JavaScript with operator logic, decimal support, keyboard input, and clean UI. Perfect beginner project.Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.Mini ProjectsBuild a JavaScript Counter Application - Step by Step Project TutorialLearn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.Mini ProjectsBuild a JavaScript Digital Clock - Step by Step Project TutorialLearn to build a live digital clock in JavaScript using Date object, setInterval, 12/24-hour toggle, AM/PM display, and smooth CSS styling.Mini ProjectsBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialLearn to build an interactive resume builder in JavaScript that generates a live HTML preview as you fill out form fields, with print and PDF export support.Mini ProjectsBuild a JavaScript Email Validator - Step by Step Project TutorialLearn to build an email validator in JavaScript using regex, real-time feedback, common domain suggestions, and bulk validation. A great regex and DOM project.

PreviousJavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026 NextBuild a Todo App in JavaScript - Step by Step Project Tutorial