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:

http://lib/sweet-alert.min.js

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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s