How to Create a Snackbar or Toast using CSS & JavaScript?

How to create dynamic breadcrumbs using JavaScript?

How to Compare Objects for Equality in JavaScript?

Snackbar or toast notifications are brief messages that pop up on a webpage to convey information or feedback to users. They are versatile tools for signaling different states, like success, error, or invalid input, and can appear at various positions on the screen.

Snackbar or Toast

Approach

First, create a basic HTML structure for your need and create a container to hold the buttons and toast for notifications you can add buttons for different types of notifications.
Then style the buttons with different colors for success, error, and invalid notification using CSS.
In the Javascript part first take the reference for all the needed id and classes. And define messages for each type of notification.
After that create a function to display the toast notifications and append the toast to the container using the appendChild() method.
You can create a close button for manual dismissal. And set a timeout using setTimeout() method to automatically remove the toast after a few seconds. Add a event listeners to the buttons to trigger the toast notifications on click.

Example : The example below shows how to create a snackbar or toast using CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Toast Notifications</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <div class="container">
        <h2 id="h2">
          Select any one of them given below
          </h2>
            <div class="buttons">
                <button class="success-btn">
                  Success
              </button>
                <button class="error-btn">
                  Error
              </button>
                <button class="invalid-btn">
                  Invalid
              </button>
            </div>
    </div>

    <div class="toastBox"></div>

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

</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    background: #f7edff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
}

#h2 {
    margin-bottom: 20px;

}

.buttons {
    display: flex;
    justify-content: center;
}

.buttons button {
    background: #333;
    color: #fff;
    border: 0;
    outline: 0;
    width: 120px;
    height: 40px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.buttons .success-btn {
    background-color: #28a745;
}

.buttons .error-btn {
    background-color: #dc3545;
}

.buttons .invalid-btn {
    background-color: #ffc107;
}

.buttons button:hover {
    opacity: 0.8;
}

.toastBox {
    position: fixed;
    top: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
    padding: 20px;
}

.toast {
    width: 400px;
    height: 80px;
    background: #fff;
    font-weight: 500;
    margin: 15px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    position: relative;
    transform: translateX(100%);
    animation: moveleft 0.5s linear forwards;
}

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

.toast i {
    margin: 0 20px;
    font-size: 35px;
}

.toast.success i {
    color: green;
}

.toast.error i {
    color: red;
}

.toast.invalid i {
    color: orange;
}

.toast::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    animation: anim 3s linear forwards;
}

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

.toast.success::after {
    background: green;
}

.toast.error::after {
    background: red;
}

.toast.invalid::after {
    background: orange;
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.close-btn i {
    color: #666;
}

.toast.error .close-btn i,
.toast.invalid .close-btn i {
    color: #666;
}

JavaScript

// script.js

const toastBox = document.querySelector('.toastBox');
const success_btn = document.querySelector('.success-btn');
const error_btn = document.querySelector('.error-btn');
const invalid_btn = document.querySelector('.invalid-btn');

const successMsg = 
    '<i class="fas fa-check-circle"></i> Successfully submitted ';
const errorMsg = 
    '<i class="fas fa-times-circle"></i> Please fix the error ! ';
const invalidMsg = 
    '<i class="fas fa-exclamation-circle"></i> Invalid input, check again';

function showToast(message, type) {
    const toast = document.createElement('div');
    toast.classList.add('toast', type);
    toast.innerHTML = 
        '<button class="close-btn">X</button>' 
                                    + message;
    toastBox.appendChild(toast);

    const closeButton = 
            toast.querySelector('.close-btn');
    closeButton.addEventListener('click', () => {
        toast.remove();
    });

    setTimeout(() => {
        toast.remove();
    }, 3000);
}

success_btn.addEventListener("click", () => {
    showToast(successMsg, 'success');
});

error_btn.addEventListener("click", () => {
    showToast(errorMsg, 'error');
});

invalid_btn.addEventListener("click", () => {
    showToast(invalidMsg, 'invalid');
})

Output:

Tags:

#CSS-Questions #CSS #Web Technologies

How to create dynamic breadcrumbs using JavaScript?

How to Compare Objects for Equality in JavaScript?

How to Create a Snackbar or Toast using CSS & JavaScript?

Approach

Contact Us