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.

<script src="https://cdn.jsdelivr.net/gh/AssassinAguilar/Alertism/dist/V2.0.0/main.js"></script>

or via npm

npm i alertism --save

then

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

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.

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.

Arguments 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

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
• center

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 not you are 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 Table

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
       })
    }
})

Docs of V1.0.0 :- https://code.sololearn.com/WxvT30Psiaqz/?ref=app