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

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

• 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

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

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

{
    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

• 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