Toastify is a well-known library that helps create Toast Notification on your website. You can find the npm project here: toastify-js

However, in this projects, we replicate the same behaviour but using the native functions provided by the browser. The HTML includes a simple button class btn

 <button class="btn" id="button">Show Notification</button>

In the JavaScript you will find the messages stored in an array list with four messages: “Message 1″,”Message 2″,”Message 3” and “Message 4”

After getting the elements by IDs: (button and toasts), we add an event Listener to the button. When the utton is clicked, a function that creates the notificacion is called, as shown in the following code:

button.addEventListener('click', () => createNotification())

Inside the createNotification function a div elemnt is created and given a toast class, a random type and a random message. The random message is selected using an index generated by the random function insidie the getRandomMessage helper function.

With this we have emulated some behaviour of the Toastify library.

You can see the code in this GitHub Repository: 27.toast_notification and the demo of the project is here: Toast Notification