const notifications = document.querySelector(".notifications"), buttons = document.querySelectorAll(".buttons .btn"); // Object containing details for different types of toasts const toastDetails = { timer: 5000, success: { icon: 'fa-circle-check', text: 'Success: This is a success toast.', }, error: { icon: 'fa-circle-xmark', text: 'Error: This is an error toast.', }, warning: { icon: 'fa-triangle-exclamation', text: 'Warning: This is a warning toast.', }, info: { icon: 'fa-circle-info', text: 'Info: This is an information toast.', } } const removeToast = (toast) => { toast.classList.add("hide"); if(toast.timeoutId) clearTimeout(toast.timeoutId); // Clearing the timeout for the toast setTimeout(() => toast.remove(), 500); // Removing the toast after 500ms } const createToast = (id) => { // Getting the icon and text for the toast based on the id passed const { icon, text } = toastDetails[id]; const toast = document.createElement("li"); // Creating a new 'li' element for the toast toast.className = `toast ${id}`; // Setting the classes for the toast // Setting the inner HTML for the toast toast.innerHTML = `