A Powerful and Elegant "alert" library for JavaScript that replaces that boring alert style of Javascript.

Overview

QuantumAlert

A Powerful , Elegant and fully customizable "alert" library using JavaScript that replaces that boring style of alert.

A success modal

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>

  1. 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

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 ❤️ using Pure and

Follow us on



Contributors

You can contribute also if you wish to do so. [Contribute]

You might also like...

Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins.

Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins.

CKEditor 5 for Strapi Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 packed with useful plugins. 👋 Get Started Feat

Jan 2, 2023

Replaces Youtube Chat with Destiny.gg chat.

Replaces Youtube Chat with Destiny.gg chat.

A lightweight extension that replaces the native Youtube Live chat with an embeded destiny.gg chat. Note: This is in no way affiliated with Destiny.gg

Jul 27, 2022

Base62-token.js - Generate & Verify GitHub-style & npm-style Base62 Tokens

base62-token.js Generate & Verify GitHub-style & npm-style Secure Base62 Tokens Works in Vanilla JS (Browsers), Node.js, and Webpack. Online Demo See

Jun 11, 2022

A customizable lightweight Alert Library with Material UI and awesome features.

A customizable lightweight Alert Library with Material UI and awesome features.

SoloAlert A customizable lightweight Alert Library with Material UI and awesome features. view soloalert on npm : https://www.npmjs.com/soloalert Inst

Nov 30, 2022

✨ Elegant portfolio template built on NextJS and Tailwind.

✨ Elegant portfolio template built on NextJS and Tailwind.

Obsidian ✨ Obsidian is a minimal and lightweight portfolio template built on NextJS and TailwindCSS. ✨ Setup Install the dependencies Edit content Cha

Dec 21, 2022

Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files.

Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files.

Obsidian Chat View Plugin Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files. Usage Every chat message must be pref

Dec 27, 2022

The invoker based on event model provides an elegant way to call your methods in another container via promisify functions

The invoker based on event model provides an elegant way to call your methods in another container via promisify functions. (like child-processes, iframe, web worker etc).

Dec 29, 2022

Elegant jest.expect typings for a more civilized age

typed-jest-expect Elegant jest.expect typings for a more civilized age Why? By default, the expect utility of jest is very broadly typed, which makes

Feb 25, 2022

An elegant console logger.

An elegant console logger.

kons An elegant console logger. Features Tiny (Minified + Gzipped ≈ 0.1kB). Beautiful. Easy to use. Customizable. TypeScript type declarations include

Aug 13, 2022
Comments
  • added top margin for #errorimg to make it look balanced.

    added top margin for #errorimg to make it look balanced.

    Alerts with svgs are have very less top margin as compared to bottom which makes them look unbalanced. So, added some top margin to vertically align things perfectly. Also HTML is not working for testing. Fixed those bugs also.

    opened by gowthamparuchuru 1
  • getting started examples

    getting started examples

    examples in the getting started section have different alert messages

    it should have alertbox with "Nice to meet you"

    Screenshot (406)

    browser : firefox (latest) os: windows 10

    opened by xAdvitya 1
  • Promisify Quantum alert.

    Promisify Quantum alert.

    Promisifing alert makes it easy to handle events.

    Currently, we have to pass function name as a string if user click 'ok' or 'cancel' and if you have to pass arguments to that function, we have to use this weird hack of bind() in the string . Also there is no event listener for when the modal closes.

    1. If user clicks on 'OK' (some success button), we can chain then or await it
    2. If user click on 'CANCEL' or close the modal, we can chain what we want to do in catch block

    In this way we can make event handling for modal much easier.

    opened by AayushKarna 0
Releases(v1.0)
Owner
Cosmogic
Beyond Limits
Cosmogic
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.

customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus

Suraj Aswal 17 Sep 10, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use

null 7 Aug 15, 2022
Tired of boring balena device names? Why not let us choose!

name-block A balenaBlock for fun device renaming Highlights Bored of your device names?: Let this block rename them for you! Loads of categories: From

Alex Bucknall 3 Dec 20, 2021
The interpretation implementation implemented programming language built for fun. I'm currently boring in full stack web development. So, I crafted this one LoL. 👻

What's Wuttyi? Everything is expression ?? I just developed this tiny programming language because of boring in higher level programming construct. Mo

Aung Myat Moe 9 Dec 13, 2022
Given an object and a property, replaces a property descriptor (or deletes it), and returns a thunk to restore it.

Given an object and a property, replaces a property descriptor (or deletes it), and returns a thunk to restore it.

Jordan Harband 7 Apr 20, 2022
A browser/Chrome extension that replaces Leftist #trigger words with "bad thing" and "current bad thing". Inspired by Tim Pool.

BadThings browser/Chrome extension replaces Leftist #trigger words with 'bad things' and 'current bad thing'. Quickstart This project uses React 18 an

Cale McCollough 2 Sep 5, 2022
Replaces native cursor with custom animated cursor.

Animated Cursor A pure JS library to replace native cursor with a custom animated cursor. Check out the Demo Contents ?? Features ?? Quickstart ?? Opt

Stephen Scaff 7 Jul 18, 2022