Web Developers Reference: Progress Bar

Saturday, 7 January 2012

Password Strength Indication Using JavaScript

It is a good practice to indicate the strength of the passwords that the users of your website choose so that they can make a secure choice. You can make a password strength indication for your website using JavaScript. A simple JavaScript function to accomplish this is discussed below. It gives a visual indication of the strength using a progress bar and also a textual description.

(Note : Progress Bar Using JavaScript has been described in a previous post)

Here a JavaScript function check() is used to check the strength of the password. The function is called every time a key press occurs. The function takes the password as the parameter. It checks the password for five conditions to determine its strength. The five conditions are as follows.

Level 1 : Password should be 8 characters long.
Level 2 : It should contain at least one lower case letter.
Level 3 : It should contain at least one upper case letter.
Level 4 : It should contain at least one number.
Level 5 : It should contain at least one special character.

So the password strength is indicated on a scale of 5 where 0 stands for a weak password and 5 stands for the strongest password. A sample screenshot of this function is given below.

Code

The complete code (HTML + JavaScript) is given below.

<html>
<head>
<title>Password strength</title>
<script type="text/javascript">
function check(x)
{
var level = 0;
var p1 = /[a-z]/;
var p2 = /[A-Z]/;
var p3 = /[0-9]/;
var p4 = /[\!\@\#\$\%\^\&\*\-\_\=\+\[\{\]\}\|\\\;\:\'\"\,\<\.\>\/\?\`\~]/;
if(x.length>=8)
level++;
if(p1.test(x))
level++;
if(p2.test(x))
level++;
if(p3.test(x))
level++;
if(p4.test(x))
level++;
prog_bar(level,0,5,200,5,"#0066FF","#99FFFF");
}
function prog_bar(cur_val,min_val,max_val,width,height,border,fill)
{
var str = "",res = 0;
if(cur_val>=min_val && cur_val<=max_val)
{
if(min_val<max_val)
{
res = ((cur_val-min_val)/(max_val-min_val))*100;
res = Math.floor(res);
}
else
{
res = 0;
}
}
else
{
res = 0;
}
if(res<=40)
fill = "#FF0000";
else if(res<=80)
fill = "#FFFF00";
else
fill = "#00FF00";
str = str + "<div style=\"border:"+border+" solid thin; width:"+width+"px; height:"+height+"px;\">";
str = str + "<div style=\"background-color:"+fill+"; width:"+res+"%; height:"+height+"px;\">";
str = str + "</div></div>";
if(res<=40)
str = str + "Weak";
else if(res<=60)
str = str + "Good";
else if(res<=80)
str = str + "Strong";
else
str = str + "Excellent";
document.getElementById("prog_bar").innerHTML = str;
}
</script>
</head>

<body>
For maximum security, password should be min 8 characters long and a combination of
<br />uppercase and lowercase letters, numbers and symbols.<br /><br />
Password : <input type="password" onkeyup="check(this.value)" /><br /><br />
<div id="prog_bar"></div>
</body>
</html>

Friday, 6 January 2012

Progress Bar Using JavaScript

You can create a simple progress bar using JavaScript and HTML. It shows graphically the percentage of work completed along with numeric indication. A JavaScript function prog_bar is used here.

Syntax

prog_bar(cur_val,min_val,max_val,width,height,border,fill);

The function has seven parameters. They are described below.

cur_val : Represents current progress. It should be an Integer.
min_val : Represents value that corresponds to 0%. It should be an integer.
max_val : Represents value that corresponds to 100%. It should be an integer.
width : Width of the progress bar in pixels. It should be an integer.
height : Height of the progress bar in pixels. It should be an integer.
border : Represents the border color. It should be a string.
fill : Represents the fill color. It should be a string.

The progress bar will be created in a <div> element with id prog_bar. So make sure that a div element with id prog_bar is created in the body of html page where the progress bar should appear. Also make sure that the function call occurs only after the div element is created.

Example

prog_bar(87,0,100,200,5,"#0066FF","#99FFFF");

The above function call statement will produce the following result in the web page.

Code

The complete code (HTML page and JavaScript function) to implement the progress bar is given below. To run it, copy the entire code to a text editor and save it with file extension ".html". Then open it using any web browser.

<html>
<head>
<title>Progress Bar Using Javascript</title>
<script type="text/javascript">
function prog_bar(cur_val,min_val,max_val,width,height,border,fill)
{
var str = "",res = 0;
if(cur_val>=min_val && cur_val<=max_val)
{
if(min_val<max_val)
{
res = ((cur_val-min_val)/(max_val-min_val))*100;
res = Math.floor(res);
}
else
{
res = 0;
}
}
else
{
res = 0;
}
str = str + "<div style=\"border:"+border+" solid thin; width:"+width+"px; height:"+height+"px;\">";
str = str + "<div style=\"background-color:"+fill+"; width:"+res+"%; height:"+height+"px;\">";
str = str + "</div></div>";
str = str + res + "%";
document.getElementById("prog_bar").innerHTML = str;
}
</script>
</head>

<body>
<div id="prog_bar">
</div>
<script type="text/javascript">
prog_bar(87,0,100,200,5,"#0066FF","#99FFFF");
</script>
</body>
</html>