How to make a Toast Notification in HTML CSS and JavaScript ? (original) (raw)

Last Updated : 23 Aug, 2024

A **Toast Notification is a small, non-intrusive popup message that briefly appears on the screen to provide feedback or updates. It features 4 distinct toast types triggered by buttons: "Submit" for a green "Success" toast, each with unique CSS animations. JavaScript manages their display duration. Typically used for alerts or confirmations, it fades away automatically after a few seconds. You can create it using simple HTML, CSS for styling, and JavaScript for functionality.

Final Output

Output Preview

Prerequisites

• HTML
• CSS
• JavaScript

Approach

• **HTML Structure: The HTML defines a .toast-buttons container with buttons for different toast types, and an empty .toast-overlay for displaying notifications.
• **CSS - Toast Styling: The .toast container is styled with a fixed position, smooth entrance animations (slideInRight), and a disappearing effect (fadeOut).
• **CSS - Progress Bar and Transitions: The .toast-progress bar shows duration using width animation (toastProgress), while .toast-success, .toast-danger, etc., apply distinct background colors.
• **JavaScript - Toast Logic Initialization: The showToast function creates a dynamic .toast element based on the button clicked, customizing its type, message, and duration.
• **JavaScript - Handling Multiple Toasts: If a toast is already visible, it is removed before displaying a new one, ensuring only one notification is active at once.
• **JavaScript - Event Listeners for Buttons: Event listeners are attached to buttons, triggering the appropriate showToast call with customized messages, icons, and styles for each notification type.

**Example: This example illustrates the basic implementation for creating the Toast Notification in HTML, CSS & JS.

HTML `

CSS

/* style.css */

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

body { min-height: 97vh; background: #d4d2a5; background-image: linear-gradient( to right, #f1bebe 0%, #f3d87f 100% ); padding: 3em 0; font-family: Arial, sans-serif; }

h3 { text-align: center; }

.toast-buttons { max-width: 700px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 2em auto; }

.toast-row { display: flex; justify-content: center; margin: 1em 0; padding: 1rem; flex-wrap: wrap; }

button.custom-toast { padding: 0.5rem 1rem; border: none; color: #fff; font-weight: 500; border-radius: 5px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.785); cursor: pointer; width: 150px; margin: 0.5em; transition: filter 0.2s ease-in-out, transform 0.3s ease-in-out; display: flex; justify-content: center; align-items: center; font-size: 1rem; background-color: transparent; outline: none; background: #3498db; color: #fff; }

button.custom-toast:hover { filter: brightness(0.9); }

button.success-toast { background-color: #2ecc71; }

button.danger-toast { background-color: #e74c3c; }

button.info-toast { background-color: #3498db; }

button.warning-toast { background-color: #f1c40f; }

h1 { color: green; }

.toast { position: fixed; top: 25px; right: 25px; max-width: 300px; background: #fff; padding: 0.5rem; border-radius: 4px; box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3); z-index: 1023; animation: slideInRight 0.3s ease-in-out forwards, fadeOut 0.5s ease-in-out forwards 3s; transform: translateX(110%); }

.toast.closing { animation: slideOutRight 0.5s ease-in-out forwards; }

.toast-progress { position: absolute; display: block; bottom: 0; left: 0; height: 4px; width: 100%; background: #b7b7b7; animation: toastProgress 3s ease-in-out forwards; }

.toast-content-wrapper { display: flex; justify-content: space-between; align-items: center; }

.toast-icon { padding: 0.35rem 0.5rem; font-size: 1.5rem; }

.toast-message { flex: 1; font-size: 0.9rem; color: #000000; padding: 0.5rem; }

.toast.toast-success { background: #95eab8; }

.toast.toast-success .toast-progress { background-color: #2ecc71; }

.toast.toast-danger { background: #efaca5; }

.toast.toast-danger .toast-progress { background-color: #e74c3c; }

.toast.toast-info { background: #bddaed; }

.toast.toast-info .toast-progress { background-color: #3498db; }

.toast.toast-warning { background: #ead994; }

.toast.toast-warning .toast-progress { background-color: #f1c40f; }

@keyframes slideInRight { 0% { transform: translateX(110%); }

75% {
    transform: translateX(-10%);
}

100% {
    transform: translateX(0%);
}

}

@keyframes slideOutRight { 0% { transform: translateX(0%); }

25% {
    transform: translateX(-10%);
}

100% {
    transform: translateX(110%);
}

}

@keyframes fadeOut { 0% { opacity: 1; }

100% {
    opacity: 0;
}

}

@keyframes toastProgress { 0% { width: 100%; }

100% {
    width: 0%;
}

}

` JavaScript ``

// script.js

let icon = { success: 'task_alt', danger: 'error', warning: 'warning', info: 'info', };

const showToast = ( message = "Sample Message", toastType = "info", duration = 5000) => { if ( !Object.keys(icon).includes(toastType)) toastType = "info";

let box = document.createElement("div");
box.classList.add(
    "toast", `toast-${toastType}`);
box.innerHTML = ` <div class="toast-content-wrapper">
                  <div class="toast-icon">
                  ${icon[toastType]}
                  </div>
                  <div class="toast-message">${message}</div>
                  <div class="toast-progress"></div>
                  </div>`;
duration = duration || 5000;
box.querySelector(".toast-progress").style.animationDuration =
        `${duration / 1000}s`;

let toastAlready = 
    document.body.querySelector(".toast");
if (toastAlready) {
    toastAlready.remove();
}

document.body.appendChild(box)};

let submit = document.querySelector(".custom-toast.success-toast"); let information = document.querySelector(".custom-toast.info-toast"); let failed = document.querySelector(".custom-toast.danger-toast"); let warn = document.querySelector(".custom-toast.warning-toast");

submit.addEventListener("click",(e) => { e.preventDefault(); showToast("Article Submitted Successfully","success",5000); });

information.addEventListener("click",(e) => { e.preventDefault(); showToast("Do POTD and Earn Coins","info",5000); });

failed.addEventListener("click",(e) => { e.preventDefault(); showToast("Failed unexpected error","danger",5000); });

warn.addEventListener("click", (e) => { e.preventDefault(); showToast("!warning! server error","warning",5000); });

``

**Output: