Create Minimal Clean Toast Popups With Autolog.js

Category: Javascript , Notification | May 29, 2024
Author:LarryZhu-dev
Views Total:45 views
Official Page:Go to website
Last Update:May 29, 2024
License:MIT

Preview:

Create Minimal Clean Toast Popups With Autolog.js

Description:

autolog.js is a simple, lightweight JavaScript library for displaying toast notifications on your webpage.

It offers four notification types: success, error, warning, and info. You can also set the duration for each toast message, which will auto-dismiss after a specified timeout.

How to use it:

1. Download and import the autolog module:

import autolog from "./index.js";

2. Create and display toast messages with the autolog.log(toastMessage, notificationType, duration) method.

  • When you invoke the `autolog.log` function, it creates a new `<span>` element with the appropriate CSS class based on the specified notification type (success, error, warning, or info). This element contains the notification message and an optional icon representing the notification type.
  • The library then appends this `<span>` element to a parent container element with the ID `#autolog`. If the `#autolog` element doesn’t exist, the library creates it dynamically and appends it to the `<body>` of the document. Additionally, it injects the necessary CSS styles into the page’s `<head>` section.
  • The CSS styles define the appearance and behavior of the notifications. Each notification type has a distinct color scheme to make it easily identifiable. The notifications are displayed in a vertical column and animated using CSS transitions and keyframe animations.
  • When a notification is created, it initially fades in with an animation to capture the user’s attention. After the specified duration (or a default value if not provided), the notification element is marked with a `hide` class, which triggers a fade-out animation. Once the fade-out animation completes, the library removes the notification element from the DOM.
autolog.log("CSSScript.Com", "success", 3000);

You Might Be Interested In:


Leave a Reply