Minimalist Success/Error Notification In Vanilla JS – notify.js

Preview:

Description:

notify.js is a minimal, simple-to-use JavaScript notification plugin to show success and error notification popups in the lower right corner of the screen.

How to use it:

Link to the stylesheet notification.css and JavaScript notify.js.

<script src="js/notify.js"></script>
<link rel="stylesheet" href="css/notification.css" />

By default, the plugin uses Font Awesome for the notification and close icons.

<link rel="stylesheet" href="/path/to/fontawesome/all.css" />

Create a new notification instance, specify the type, and define the title & message displayed in the notification popup.

notify.addNotification({
  // or "error"
  type: "success",
  // title
  title: "Notification Title",
  // message
  message: "Notification Message"
});

Change the colors and icons of your notification messages.

//Change the color and icon on your notification
if (this.type == "success") {
  icon = "fas fa-check";
  divClass = "success";
  textColor = "#64963b";
} else if (this.type == "error") {
  icon = "fas fa-times";
  divClass = "error";
  textColor = "#963b3b";
}