Tuesday, May 13, 2014

Password Strength Indicator Using HTML5, CSS3, jQuery

Now a day’s providing security to the user credentials is very essential part. For that as website administrators or web masters we must be aware on providing security to the end users. So for that today I am presenting a password strength indicator code for you to implement it on your sites. Thanks to Sagie Maoz for providing such a wonderful script Password Strength.

The major purpose of the script is, it will show you the live status of your chosen password whether it is a weak password, normal password, or strong password. So let’s get into coding.

In order to be familiar with this code you as a web developer need to have little understanding of HTML, CSS and jQuery.

What you are going to achieve with this code finally?


Step 1: HTML Part


<!DOCTYPE html>
<html>
    <head>
  <title>HTML5, CSS3 and jQuery Password Strength Indicator - PHPHUNGER.COM</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        
            <div id="top"> Live Password Strength Indicator Using HTML5, CSS3 and jQuery - PHPHUNGER.COM </div>
            <div id="wrapper">
                <div id="form">
                    <label>Choose Your Password</label>
                    <input type="password" autocomplete="off" name="passwd" class="passwd" />
                    <span class=""></span>
                </div>
            </div>
        
       
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/password_strength.js"></script>
        <script type="text/javascript">
            $(function()
            {
                $('.passwd').password_strength();

            });
        </script>
  
    </body>


Step 2: CSS Part



input {
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:0 5px;
}

label {display:block;
       font-weight:bold;
       text-align:right;
       width: 200px;
       float:left;
}

#top{
    margin-left: 95px;
    font-weight: bold;
    font-size:24px;
    color: red;
    padding: 10px;
}
#wrapper{
 margin: 0 auto;
    border:solid 5px #b7ddf2;
    background:#ebf4fb;
    width: 800px;
    margin: auto;
    padding:5px;
    height:100px;
}

#form{margin: 5%;}

.password_strength {
    padding: 0 5px;
    display: inline-block;
}
.password_strength_1 {
    background-color: #fcb6b1;
}
.password_strength_2 {
    background-color: #fccab1;
}
.password_strength_3 {
    background-color: #fcfbb1;
}
.password_strength_4 {
    background-color: #dafcb1;
}
.password_strength_5 {
    background-color: #bcfcb1;
}


Step 3: jQuery Part


$(document).ready(function() {

var passwordStrength = new function()
{
 this.countRegexp = function(val, rex)
 {
  var match = val.match(rex);
  return match ? match.length : 0;
 };
 
 this.getStrength = function(val, minLength)
 {
  var len = val.length;
  
  // too short
  if (len < minLength)
  {
   return 0;
  }
  
  var nums = this.countRegexp(val, /\d/g),
   lowers = this.countRegexp(val, /[a-z]/g),
   uppers = this.countRegexp(val, /[A-Z]/g),
   specials = len - nums - lowers - uppers;
  
  // just one type of characters =(
  if (nums == len || lowers == len || uppers == len || specials == len)
  {
   return 1;
  }
  
  var strength = 0;
  if (nums) { strength+= 2; }
  if (lowers) { strength+= uppers? 4 : 3; }
  if (uppers) { strength+= lowers? 4 : 3; }
  if (specials) { strength+= 5; }
  if (len > 10) { strength+= 1; }
  
  return strength;
 };
 
 this.getStrengthLevel = function(val, minLength)
 {
  var strength = this.getStrength(val, minLength);

  val = 1;
  if (strength <= 0) {
   val = 1;
  } else if (strength > 0 && strength <= 4) {
   val = 2;
  } else if (strength > 4 && strength <= 8) {
   val = 3;
  } else if (strength > 8 && strength <= 12) {
   val = 4;
  } else if (strength > 12) {
   val = 5;
  }

  return val;
 };
};

$.fn.password_strength = function(options)
{
 var settings = $.extend({
  'container' : null,
  'bar': null, // thanks codemonkeyking
  'minLength' : 6,
  'texts' : {
   1 : 'Too weak',
   2 : 'Weak password',
   3 : 'Normal strength',
   4 : 'Strong password',
   5 : 'Very strong password'
  },
  'onCheck': null
 }, options);
 
 return this.each(function()
 {
  var container = null, $bar = null;
  if (settings.container)
  {
   container = $(settings.container);
  }
  else
  {
   container = $('').attr('class', 'password_strength');
   $(this).after(container);
  }

  if (settings.bar)
  {
   $bar = $(settings.bar);
  }
  
  $(this).bind('keyup.password_strength', function()
  {
   var val = $(this).val(),
     level = passwordStrength.getStrengthLevel(val, settings.minLength);

   if (val.length > 0)
   {
    var _class = 'password_strength_' + level,
      _barClass = 'password_bar_' + level;
    
    if (!container.hasClass(_class) && level in settings.texts)
    {
     container.text(settings.texts[level]).attr('class', 'password_strength ' + _class);
    }
    if ($bar && !$bar.hasClass(_barClass))
    {
     $bar.attr('class', 'password_bar ' + _barClass);
    }
   }
   else
   {
    container.text('').attr('class', 'password_strength');
    if ($bar) {
     $bar.attr('class', 'password_bar');
    }
   }
   if (settings.onCheck) {
    settings.onCheck.call(this, level);
   }
  });

  if ($(this).val() != '') { // thanks Jason Judge
    $(this).trigger('keyup.password_strength');
  }
 });
};

});

Monday, December 30, 2013

HTML5, jQuery Animated Fireworks Effect

Hi all,

After long time I am back with one new tutorial and it’s a tutorial mostly based on jQuery, HTML5. I hope you will like it and you will implement it on your sites or blogs etc.

As we know most of the web developers are ready to add some new features to their websites if any occasion comes like New Year eve or Christmas etc. So as a web developer it will be a decent idea if the website is added with a new feature like some blasting effect like fireworks effect. I hope you also one of them who is looking forward to add such kind of effects. If you are then let’s get started.

With new features added in HTML there is a possibility of adding any kind of animated effect. Previously we use to do such kind of effects using flash but with new HTML5, CSS3, and jQuery these are all possible with simple coding.


What you are going to achieve?



Step 1: Prepare the Document


<!doctype html>
<html>
<head>
<title>jQuery Fireworks Animation</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="fireworks-animation.js" type="text/javascript"></script>
<style>
body{background: #000000 url('fireworks.jpg') no-repeat; }
#mblfireworks{display: block;
width: 1000px;
height: 600px;
float: center;
color:#6F6F6F;
text-align: center;
font-size: 12px;
}
#mblfireworks a {color:#6F6F6F;}
</style>
</head>
<body>
<div id="mblfireworks"></div>
<script>
jQuery(function($){              
Xteam.fireworkShow('#mblfireworks', 100);                
});  
</script>
</body>

Step 2: Implement the jQuery code for Fireworks effect



if (!Xteam) var Xteam = {};
Xteam.fireworkShow = function (a, c) {
    function e() {
        a = j(a).eq(0);
        a.css("position") == "static" && a.css("position", "relative");
        h = j("");
        if (!h[0].getContext) return false;
        h.attr({
            height: a.height(),
            width: a.width()
        }).css({
            position: "absolute",
            display: "block",
            top: 0,
            left: 0,
            zIndex: 99999
        }).appendTo(a);
        n = Xteam.Canvas.scene(h[0]);
        l = setInterval(function () {
            Math.random() > 0.75 || Xteam.firework(n)
        }, 1.5 * c);
        k = true
    }
    var d = {}, j = jQuery,
        l, n, h, k = false;
    c = c || 900;
    e();
    d.remove = function () {
        if (k) {
            clearInterval(l);
            n.destroy();
            n = null;
            h.remove();
            a = h = null
        }
    };
    return d
};
Xteam || (Xteam = {});
Xteam.firework = function (a) {
    function c() {
        k = 360 * Math.random();
        f = Xteam.Color.hslToRgb([k, Math.random(), 0.2 + 0.8 * Math.random()]);
        i = (a.getCanvas().width - h * 2) * Math.random() + h;
        m = (a.getCanvas().height / 2 - h) * Math.random() + h;
        o = a.getCanvas().height;
        a.register(j)
    }

    function e() {
        if (o > m) {
            o -= 10;
            l.fillStyle = "rgb(" + f[0] + "," + f[1] + "," + f[2] + ")";
            l.beginPath();
            l.arc(Math.round(i), Math.round(o), 2, 0, 2 * Math.PI, true);
            l.fill()
        } else {
            a.remove(j);
            d()
        }
    }

    function d() {
        for (var p = 40 + Math.floor(50 * Math.random()); p--;) {
            var q = Xteam.Color.hslToRgb([k, Math.random(), 0.2 + 0.8 * Math.random()]);
            new n(a, q, i, m, 10)
        }
    }
    var j = {
        draw: e
    }, l = a.getContext(),
        n = Xteam.FireworkParticle,
        h = 70,
        k, i, m, o, f;
    c();
    return j
};
Xteam.FireworkParticle = function (a, c, e, d) {
    this.scene = a;
    this.color = c;
    this.x = Math.round(e);
    this.y = Math.round(d);
    this.rotate = 2 * Math.PI * Math.random();
    this.opacity = 500;
    this.f = 0;
    this.max = 50 + 10 * Math.random();
    this.size = 0;
    this.speed = 4 * Math.random();
    a.register(this)
};
Xteam.FireworkParticle.prototype = {
    getStyle: function () {
        return "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + this.opacity / 100 + ")"
    },
    draw: function (a, c) {
        if (this.f < this.max) {
            this.f++;
            this.size += this.speed;
            this.speed *= 0.95;
            if (this.f > 0.8 * this.max) this.opacity -= 6;
            c.lineWidth = 1;
            c.save();
            c.translate(this.x, this.y);
            c.rotate(this.rotate);
            c.strokeStyle = this.getStyle();
            c.beginPath();
            c.moveTo(Math.round(0.85 * this.size), 0);
            c.lineTo(Math.round(this.size), 0);
            c.stroke();
            c.restore()
        } else this.scene.remove(this)
    }
};
Xteam || (Xteam = {});
if (!Xteam.Canvas) Xteam.Canvas = {};
Xteam.Canvas.scene = function (a) {
    function c(f) {
        i.push(f)
    }

    function e() {
        for (var f = m.length; f--;) i[m[f]] = null;
        m = [];
        for (f = i.length; f--;) i[f] || i.splice(m[f], 1)
    }

    function d(f) {
        for (var p = i.length; p--;)
            if (f === i[p]) {
                m.push(p);
                break
            }
    }

    function j() {
        clearInterval(o)
    }

    function l() {
        return k
    }

    function n() {
        return a
    }
    var h = {
        register: c,
        remove: d,
        getContext: l,
        getCanvas: n,
        destroy: j
    }, k = a.getContext("2d"),
        i = [],
        m = [],
        o = setInterval(function () {
            k.clearRect(0, 0, a.width, a.height);
            for (var f = i.length; f--;) typeof i[f].draw == "function" && i[f].draw(h, k);
            e()
        }, 30);
    return h
};
Xteam || (Xteam = {});
if (!Xteam.Color) Xteam.Color = {};
Xteam.Color.hslToRgb = function (a) {
    var c = a[0],
        e = a[1];
    a = a[2];
    if (e == 0) r = g = b = a;
    e = a < 0.5 ? a * (1 + e) : a + e - a * e;
    a = 2 * a - e;
    c /= 360;
    var d = [];
    d[0] = c + 1 / 3;
    d[1] = c;
    d[2] = c - 1 / 3;
    for (c = 3; c--;) {
        d[c] %= 1;
        d[c] = d[c] < 1 / 6 ? a + (e - a) * 6 * d[c] : d[c] < 0.5 ? e : d[c] < 2 / 3 ? a + (e - a) * 6 * (2 / 3 - d[c]) : a;
        d[c] *= 255;
        d[c] = Math.floor(d[c]);
        if (d[c] < 0) d[c] = 0
    }
    return d
};
Xteam.Color.hslToRgb.test = function () {
    function a(e, d) {
        for (var j = e.lenght; j--;)
            if (e[j] !== d[j]) throw Error("Got " + e + ", expected " + d);
        console.log("success")
    }
    var c = Xteam.Color.hslToRgb;
    a(c([0, 1, 1]), [1, 0, 0]);
    a(c([120, 0.5, 1]), [0.5, 1, 0.5]);
    a(c([240, 1, 0.5]), [0, 0, 0.5]);
    c([104.15549071384422, 0.9040453462245244, 0.2855993456480115])
};
Thats it.