Toast Notification

"Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position." https://getbootstrap.com/docs/4.3/components/toasts/

const toasts = document.querySelectorAll(".toast");
const removeBtn = document.querySelector(".removeBtn");

removeBtn.addEventListener("click", () => {
    toasts.forEach((toast) => {
        toast.classList.add("show");
        removeBtn.classList.add('hide');
        setTimeout(() => {
            toast.classList.remove("show");
            removeBtn.classList.remove('hide');
        }, 4000);
    });
});

ELI5 the above:
This JavaScript code snippet is using the DOM (Document Object Model) API to interact with HTML elements on a web page. It involves toasts and a remove button. Toasts are temporary messages that typically appear at the top or bottom of the screen to notify the user about an event or provide brief information. Let me explain what each line does:

const toasts = document.querySelectorAll(".toast"); This line selects all HTML elements with the class "toast" and stores them in a constant variable named toasts.
const removeBtn = document.querySelector(".removeBtn"); This line selects the first HTML element with the class "removeBtn" and stores it in a constant variable named removeBtn.
removeBtn.addEventListener("click", () => { This line adds an event listener to the removeBtn element. The event listener listens for a "click" event, and when the button is clicked, the anonymous arrow function inside the event listener is executed.
toasts.forEach((toast) => { This line iterates over all the toast elements in the toasts variable using the forEach method. For each toast element, an anonymous arrow function is executed with the current toast element passed as an argument.
toast.classList.add("show"); This line adds the "show" class to the current toast element. This typically triggers a CSS transition or animation to make the toast element visible.
removeBtn.classList.add('hide'); This line adds the "hide" class to the removeBtn element. This typically hides the remove button using CSS.
setTimeout(() => { This line uses the setTimeout function to execute another anonymous arrow function after a delay of 4000 milliseconds (4 seconds).
toast.classList.remove("show"); Inside the setTimeout function, this line removes the "show" class from the current toast element after the 4-second delay. This typically triggers a CSS transition or animation to hide the toast element.
removeBtn.classList.remove('hide'); This line removes the "hide" class from the removeBtn element after the 4-second delay. This typically makes the remove button visible again using CSS.
}, 4000); This line closes the setTimeout function and specifies the delay of 4000 milliseconds (4 seconds) before executing the anonymous arrow function inside it.

In summary, this code snippet shows and hides toast elements on the web page when the remove button with the class "removeBtn" is clicked. When clicked, all toast elements are shown for 4 seconds, and then they are hidden again. The remove button is hidden while the toasts are visible and reappears when the toasts are hidden.

Toast Notification

Table of contents

No headings in the article.