QuantumAlert

<p align="center"> <a href="https://quantumalert.cosmogic.com"> <img alt="QuantumAlert" src="https://raw.githubusercontent.com/CosmogicOfficial/QuantumAlert/c23d657fd64891a5f841f66007afc4348bfa39d8/MDfiles/Logoalert.svg" width="200" title="QuantumAlert website"> </a> </p> <p align="center" > A Powerful , Elegant and fully customizable "alert" library using JavaScript that replaces that boring style of alert. </p> <p align="center" title="Licence MIT"> <a href="https://github.com/CosmogicOfficial/QuantumAlert/blob/master/LICENSE"> <img src="https://raw.githubusercontent.com/CosmogicOfficial/QuantumAlert/master/MDfiles/LICENCE.svg" /> </a> <p align="center"> <img alt="A success modal" src="https://github.com/CosmogicOfficial/QuantumAlert/blob/master/MDfiles/QuantumAlert.gif?raw=true"> </p>

Installation

1. Place the below script tag under the head section in your HTML webpage.

For White Dark and DarkBlue Theme

<script src="https://cdn.jsdelivr.net/gh/cosmogicofficial/quantumalert@latest/minfile/quantumalert.js" charset="utf-8"></script>

<br>

2. Add the defer and sync keyword in the script tag of javascript file in which you want to use QuantumAlert library. It improves the performance of library and your webpage.

For Example

<script src="example.js" charset="utf-8" defer async></script>

Here replace the example.js with the name of your Javascript file in which you want to use the library.

Usage

For alert with success icon.

Qual.success("Hello Heading", "Helllo content");

Documentation

• Installation
• Getting started
• Examples

Examples

An error message:

Qual.error("Oops!", "Something went wrong!", err);

A Simple message:

Qual.sw("Hello Cosmogic!");

A Simple message alert box with Heading:

Qual.swh("Hello Cosmogic", "We are here to make coding fun!");

A customizable confimation alert box where you can changeicon and also attach a function to the buttons :

Qual.confirm(
  "Submitted Successfully",
  "Your File has been uploaded successfully",
   war,
  "Ok",
  "Cancel",
  "hello",
  "max",
);

A prompt modal, with an input field where user can enter text,password or number :

Qual.confirm(
  "Are you sure you want to continue",
  "Click Ok button to continue and Cancel to Close",
  succ,
  "OK",
  "Cancel",
  "yes_btn_fun",
  "no_btn_fun",
  "text",
  "Enter your age in this field"
);

Contributing

If you're changing the core library:

1. Move to the Javascript folder in the root directory.
2. Make changes in the JavaScript and Css file quantumalert.js ,quantumalert.css.
3. Submit pull request.

Built with :heart: using Pure <img src="https://raw.githubusercontent.com/CosmogicOfficial/QuantumAlert/master/MDfiles/javascript.svg" height="40px"></img> and <img src="https://raw.githubusercontent.com/CosmogicOfficial/QuantumAlert/master/MDfiles/css-3.svg" height="40px"></img>

Follow us on

<br> <a href="https://www.instagram.com/cosmogicofficial/"><img src="https://github.com/CosmogicOfficial/QuantumAlert/blob/master/MDfiles/instagram.gif?raw=true" height="100px" style="border-radius:50%;margin-left:20px;"/></a> <a href="https://www.linkedin.com/company/cosmogic/?viewAsMember=true"> <img src="https://github.com/CosmogicOfficial/QuantumAlert/blob/master/MDfiles/linked.gif?raw=true" height="100px" style="width:60px;height:60px;margin-left:20px;"/></a><a href="https://twitter.com/wearecosmogic"><img src="https://github.com/CosmogicOfficial/QuantumAlert/blob/master/MDfiles/twitter.gif?raw=true" height="100px" style="border-radius:250px; margin-left:20px;"/></a>

---

Contributors

You can contribute also if you wish to do so. [Contribute] <a href="https://github.com/cosmogicofficial/quantumalert/graphs/contributors"><img src="" /></a> <br> <a href="https://github.com/cosmogicofficial/quantumalert/graphs/contributors"> <img src="https://contributors-img.web.app/image?repo=cosmogicofficial/quantumalert" /> </a>