Skip to content

Instantly share code, notes, and snippets.

@erikyo
Created October 13, 2023 13:21
Show Gist options
  • Save erikyo/7ecfad5c5c3f32ca1f5399bd28033961 to your computer and use it in GitHub Desktop.
Save erikyo/7ecfad5c5c3f32ca1f5399bd28033961 to your computer and use it in GitHub Desktop.
This code defines a JavaScript function named makeToast designed for displaying customizable toast notifications on a web page. Toast notifications are often used to provide brief, non-intrusive feedback or information to the user.
function makeToast( message = 'OK!', timeout = 3000 ) {
// Create the toast notification element
const toast = document.createElement('div');
toast.textContent = message;
toast.style = 'display:block;max-width:calc(100% - 20px);position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:10px 20px;border-radius:5px;';
// display the toast notification
document.body.appendChild(toast);
// Hide and remove the toast after a while
setTimeout(() => document.body.removeChild(toast), timeout );
}
makeToast("The toast is ready! 😎")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment