Toast notifications are a great way to provide users with quick and non-intrusive feedback about actions they’ve taken within an application. In this article, we will discuss how to create a toast notification in Javascript. We will start by defining what a toast notification is and how it works, then move on to the steps involved in creating a toast notification in Javascript.
What is a Toast Notification?
A toast notification is a small, unobtrusive message that appears on the screen to provide feedback to the user about an action they’ve taken. Toast notifications are commonly used in web applications to indicate successful or failed actions, such as saving a form or submitting a request.
How Toast Notifications Work
Toast notifications are created using HTML, CSS, and Javascript. They are typically positioned in the bottom-right or top-right corner of the screen and disappear after a few seconds. Toast notifications can be customized to include different types of messages, icons, and colors.
Creating the HTML Structure
To create a toast notification, we first need to create the HTML structure. We will create a div element with a class of “toast” and add the necessary elements for the message, icon, and close button.
<div class="toast">
<div class="toast-icon"></div>
<div class="toast-message"></div>
<button class="toast-close"></button>
</div> Styling the Notification
After creating the HTML structure, we need to style the notification using CSS. We will position the notification in the bottom-right corner of the screen, add some padding, and style the elements.
.toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.toast-icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url("toast-icon.png");
}
.toast-message {
display: inline-block;
margin-left: 10px;
}
.toast-close {
position: absolute;
top: 5px;
right: 5px;
background-color: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
}
Creating the JavaScript Functionality
Next, we need to create the Javascript functionality to show and hide the toast notification. We will create a function that takes in the message, icon, and options as parameters and sets the necessary properties.
function showToast(message, icon, options) {
var toast = document.querySelector(".toast");
var toastIcon = toast.querySelector(".toast-icon");
var toastMessage = toast.querySelector(".toast-message");
// Set the message and icon
toastIcon.style.backgroundImage = "url(" + icon + ")";
toastMessage.innerText = message;
// Set the options
// Show the toast
toast.classList.add("show");
} Hiding the Toast Notification
To hide the toast notification, we will add a setTimeout function that removes the “show” class after a specified amount of time.
// Show the toast
toast.classList.add("show");
// Hide the toast
setTimeout(function () {
toast.classList.remove("show");
}, options.duration || 3000);
} Adding Options to the Toast Notification
We can add options to the toast notification to customize its behavior. We will add an options object with a duration property that specifies how long the toast notification will be displayed.
function showToast(message, icon, options) {
// ...
// Hide the toast
setTimeout(function () {
toast.classList.remove("show");
}, options.duration || 3000);
}
showToast("Success!", "success.png", { duration: 5000 }); Customizing the Toast Notification
We can customize the toast notification by changing its background color, font size, and other properties. We can also add different icons and messages for different types of notifications.
showToast("Error!", "error.png", { duration: 5000, backgroundColor: "#ff0000", fontSize: "16px" }); Dealing with Multiple Notifications
If we have multiple notifications, we need to make sure that they don’t overlap each other. We can add a check to see if there is already a toast notification on the screen and wait for it to disappear before showing the new notification.
function showToast(message, icon, options) {
var toast = document.querySelector(".toast");
var toastIcon = toast.querySelector(".toast-icon");
var toastMessage = toast.querySelector(".toast-message");
if (toast.classList.contains("show")) {
setTimeout(function () {
showToast(message, icon, options);
}, 1000);
} else {
// Set the message and icon
toastIcon.style.backgroundImage = "url(" + icon + ")";
toastMessage.innerText = message;
// Set the options
// ...
// Show the toast
toast.classList.add("show");
// Hide the toast
// ...
}
} Adding Animation Effects
We can add animation effects to the toast notification to make it more visually appealing. We can use CSS transitions to add fade-in and fade-out effects.
.toast {
// ...
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.toast.show {
opacity: 1;
} Accessibility Considerations
When creating toast notifications, we need to consider accessibility for users who may use assistive technology such as screen readers. We can add ARIA roles and labels to make the toast notification more accessible.
<div class="toast" role="alert" aria-live="assertive">
<div class="toast-icon"></div>
<div class="toast-message"></div>
<button class="toast-close" aria-label="Close"></button>
</div> Testing the Toast Notification
To test the toast notification, we can call the showToast function with different messages and icons and check that the notification appears on the screen and disappears after the specified duration.
showToast("Success!", "success.png", { duration: 5000 });
showToast("Error!", "error.png", { duration: 5000 }); Conclusion
Toast notifications are a great way to provide feedback to users in a non-intrusive way. In this article, we have learned how to create a toast notification in JavaScript by using HTML, CSS, and JavaScript. We have seen how to add options and customize the toast notification, how to deal with multiple notifications, and how to add animation effects and accessibility considerations.
FAQs
A toast notification is a small message that appears on the screen to provide feedback to the user.
Toast notifications are non-intrusive and provide a quick way to provide feedback to the user without interrupting their workflow.
Yes, you can customize the appearance of the toast notification by changing its background color, font size, and other properties.