Beautifying Javascript's default alerts with sweetalert

Ok, I was in the middle of my upocoming (scheduled for the 17th of March) AngularJS Form Validation example for the Web Code Geeks (WCG)  community, using Twitter Bootstrap and AngularJS and I was quite excited about that, but still my sample app didn't look so beautiful.

What resulted to this condition, was the fact of the deprecated JavaScript's default alert functions, so after a quick search, I found out that sweetalert matched my needs.

SweetAlert is not a jQuery plugin, but a combination of JS, CSS and some images, which together, produce a very catchy product that every front-end developer would love making use of.

What to include in your project in order to use it

All you have to do, in order to use these fancy alerts in your projects, in to download the package from the fore-mentioned link (or just the lib folder) and reference the JavaScript and CSS files manually:

How to use it

A simple alert:

swal("Hello World!");

An error message - the arguments' order is: title, text, message type:

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

Using sweetalert in a real project

A good starting point would be this repo of mine, where I'm implementing an AngularJS form validation app, using Bootstrap and sweetalert.

 You will be able to read about the project's analysis (from Angular's perspective) in a week, as this is an example that will be published in WCG, as I fore-mentioned.

For the moment, here are the product's screenshots from the successful and erroneous app's alerts:

Success alert

Error alert

Cheers!