Create a Pagination using HTML CSS and JavaScript

How to make a Toast Notification in HTML CSS and JavaScript ?

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

ToastOutput-(1) — Output Preview

Prerequisites

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Custom Toast Notification</title>
    <link rel="stylesheet" 
          href="style.css">
    <link rel="stylesheet"
        href=
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>

<body>
    <div class="container">
        <h3>
             Toast Notification in 
             HTML CSS JavaScript
          </h3>
        <div class="toast-buttons">
            <div class="toast-row">
                <button type="button" 
                        class="custom-toast 
                               success-toast">
                    Submit
                  </button>
                <button type="button" 
                        class="custom-toast 
                               danger-toast">
                    Failed
                  </button>
                <button type="button" 
                        class="custom-toast 
                               info-toast">
                    Information
                  </button>
                <button type="button" 
                        class="custom-toast 
                               warning-toast">
                    Warning
                  </button>
            </div>
        </div>
    </div>
    <div class="toast-overlay" 
         id="toast-overlay"></div>
    <script src="./script.js"></script>
</body>

</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:
    '<span class="material-symbols-outlined">task_alt</span>',
    danger:
    '<span class="material-symbols-outlined">error</span>',
    warning:
    '<span class="material-symbols-outlined">warning</span>',
    info:
    '<span class="material-symbols-outlined">info</span>',
};

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:

How to make a Toast Notification in HTML CSS and JavaScript ?

Create a Pagination using HTML CSS and JavaScript

A

ashishbhardwaj18

Improve

Article Tags :

Similar Reads