Introduction

Alertism.js is a JavaScript Library which is used to make the default Alerts of JavaScript more beautiful and good-looking than original with some few lines of code. This is the V2.0.0 of Alertism.js by Assassin. Alertism.js is also used to make some nice Toasts means Pop-Ups.

Implementation

Let's talk about the easy implementation of Alertism.js V2.0.0 to your webpage. You just have to copy/paste the following CDN of Alertism.js V2.0.0 to your webpage. This CDN will import the Alertism.js V2.0.0 Library from it's repository on Assassin's GitHub profile to your webpage.

or via npm

npm i alertism --save

then

import { Alertism, Toast } from "./node_modules/alertism/alertism.js";

What's New ?

Fixed almost all major bugs. There's such a lot of new stuff in Alertism.js V2.0.0 :-

+2 New Themes

Now, Alertism.js old mode argument got changed and 2 new themes are added in the new argument of mode in Alertism.js V2.0.0.

+4 Closing Aguments

In Alertism.js V2.0.0, 4 new Closing arguments are added which will work when the alert close and the type for these new arguments are functions.

+1 New Icon

In Icons, 1 more new icon get added which is completelly different from the old one's.

Timer Argument

A new argument for timer get added in Alertism.js V2.0.0, it will close the Alert fully automatically. The timer argument type is a Number in milliseconds.

New Animations

The old animations of Alertism.js got changed a bit good in Alertism.js V2.0.0, Old animations are also included in Alertism.js V2.0.0. Just make the first letter capital in the animation.

Positions Arguments

New argument to set position for Alerts are included in Alertism.js V2.0.0, there are 6 different positions are available to set the Alert position.

And so on new things are there in also which you will learn in next section

Usage

Alertism({ alertHeading: "Heading for Alert", alertText: "Text for Alert." })

That was the basic calling of the Alertism.js V2.0.0 Alerts.

WARNING:- 2 Alerts can't be used at same event listeners, So if you want to use 2 Alerts at same time. You have to use the other one in the onConfirmed like argumetns of the first one.

Finally, The main object is Alertism which contains all arguments in a form of array. Check out the following table and try to understand it carefully as you are only become able to use Alertism.js V2.0.0 after understanding the following table.

Argument	Argument Type	Work
alertHeading	String ( Text )	Heading For The Alert
alertText	String ( Text )	Text For The Alert
alertHTML	String ( HTML Code )	HTML Code For Alert
btnText	String ( Text )	Text for Right Side Button
closeBtnText	String ( Text )	Enable a Button on Left Side and Text for It
alertFooter	String ( HTML Code or Text )	HTML Code or Text For Footer
enableIcon	Boolean ( True or False )	Enables Icon For The Alert
icon	Array	Colour, Position and Type for Icon
enableInput	Boolean ( True or False )	Enable Input for Alert
input	Array	Type ( within textarea ), Value and PlaceHolder for Input
enableCloseBtn	Boolean ( True or False )	Enable a Button to Close the Alert
backdrop	String ( CSS Background Code )	Change the Backdrop of The Alert
background	String ( CSS Background Code )	Change the Background of The Alert
theme	String	Theme for The Alert
timer	Int ( milliseconds )	Close the Alert automatically in the given time
position	String	Open the Alert at the given position
animation	String	Sets animation for the Alert
animationIn	String	Sets animation for the Alert Coming
animationOut	String	Sets animation for the Alert Going
onConfirmed	Function	A function which will work after closing the alert with confirming the following situation
onDenied	Function	A function which will work after closing the alert with dening the following situation
onCanceled	Function	A function which will work after closing the alert with canceling the following situation
onAutoClose	Function	A function which will work after closing the alert by the timer argument

Let's talk about all valid positions, animations, themes, icons Array and input Array for the Alerts

1. All valid Positons are like top-left, center and bottom-right. Here's the list for them

top-left
top
top-right
center-left
center
center-right
bottom-left
bottom
bottom-right

2. All valid Animations are same as old, they just get a little bit more good and awesome. Here's the list

top
left
bottom
right
zoom

Note :- The animationOut values are same as animation values just put "-out" after animation name.

3. All valis themes are as follows

light
dark
glass
light-neumorphism
dark-neumorphism

4. The icon Array arguments are as follows

{ position: "center", type: "tick", color: "#2196f3" }

All valid positions are left, center, right.
All valid types of icons are tick, cross, info, warning, question.

5. The input arguments are as follows

{ type: "textarea", placeHolder: "Enter Your Feedback", value: "This is Nice." }

A mixed example of most of the arguments of the Alertism

Alertism({ alertHeading: "Hello", alertText: "Can I try to Hack your device please ? :) Do not worry I am just a beginner in Hacking, If I accidently done something wrong then nothing will happen just your data got sold :)", btnText: "Ok, Hack It", closeBtnText: "No, Please Do not", enableCloseBtn: true, enableIcon: true, icon: { type: "question" }, alertFooter: "If something gone wrong, then BLAME YOURSELF !!", onConfirmed: () => { Alertism({ alertHeading: "Hey, Thanks !", alertText: "Hacking Completed Successfully !! Your all data is now mine :)", enableIcon: true, theme: "light-neumorphism", animation: "top" }) }, onDenied: () => { Alertism({ alertHeading: "Why ?", alertText: "If you do not want your phone to be hacked than I am leaving you but do not met me again, Bye Bye ! :(", enableIcon: true, icon: { type: "cross" }, theme: "dark-neumorphism", animation: "bottom" }) }, onCanceled: () => { Alertism({ alertHeading: "", alertText: "Why ? You Canceled it !! Are you not my friend ? Our friendship overed !! :(", enableIcon: true, icon: { type: "warning" }, theme: "dark", animation: "left" }) }, theme: "glass", animation: "zoom-in" })

Toast

Alertism.js V2.0.0 also makes Toasts means Pop-Ups, Let's have a look on it's table to understand it properly. The main object in this is Toast which contains all the arguments in the form of an array

Arguments	Arguments Type	Work
text	String ( Text )	Text For The Toast
background	String ( CSS Background Code )	Background For The Toast
color	String ( Color )	Colour of Text For Toast
theme	String	Theme For The Toast
position	String	Open the Toast at the given position
enableIcon	Boolean ( True or False )	Enable Icon For Toast
icon	Array	Colour and Type For Toast
showTimeLine	Boolean ( True or False )	Enable Time Bar For The Toast
timer	Int ( in milliseconds )	Close Toast in the given time
animation	String	Sets animation For The Toast
onClose	Function	A function which will work after closing the Toast

All the valid positions, themes, animations and icon array are same as Alerts. Just remember the following

Position in icon Array isn't available
Make the First letter capital in the animations

Note:- The timer for the Toasts are setted to 500 milliseconds more for the perfect animation of the time bar, If you aslo want perfect timing of the toasts going then enter the timer value to 500 milliseconds less than you want.

A mixed example of most of the arguments of the Toast

Toast({ position: 'top-right', showTimeLine: true, enableIcon: true, icon: { type: 'info', color: '#2196f3' }, animation: 'Right', theme: 'glass', timer: 4500, onClose: () => { Toast({ text: 'I am a Toast which comes on the onClose argument of the other one', enableIcon: true, position: 'top-left', animation: 'Left', showTimeLine: true, theme: 'dark-neumorphism', timer: 4500 }) } })