How to create a Snackbar using HTML, CSS & JavaScript?

How to create a revealing sidebar using HTML, CSS and 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.

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 IDs 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. Set a timeout using the setTimeout() method to automatically remove the toast after a few seconds. Add 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>Snackbar Notifications</title>
    <link rel="stylesheet" href="index.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">w3wiki - Snackbar using HTML, CSS & JS</h2>
        <button class="btn btn-lg" onclick="showSnackbar()">Show Snackbar</button>
    </div>
    <div class="toastBox"></div>
    <script src="index.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;
}

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

button.btn: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;
    color: green;
}

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

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

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

JavaScript

const toastBox = document.querySelector('.toastBox');
const button = document.querySelector('.btn');
const message = '<i class="fas fa-check-circle"></i> Hello w3wiki';
let toastTimeout;
let existingToast;

function showSnackbar() {
    // If a toast is already present, remove it before creating a new one
    if (existingToast) {
        clearTimeout(toastTimeout);
        existingToast.remove();
    }

    const toast = document.createElement('div');
    toast.classList.add('toast');
    toast.innerHTML = `<button class="close-btn">X</button>${message}`;
    toastBox.appendChild(toast);
    existingToast = toast;

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

    toastTimeout = setTimeout(() => {
        toast.remove();
        existingToast = null;
    }, 5000);
}

button.addEventListener('click', showSnackbar);

Output:

Tags:

#JavaScript-Projects #JavaScript-Questions #JavaScript #Web Technologies

How to create a revealing sidebar using HTML, CSS and JavaScript ?