Web Developers Reference: January 2012

Tuesday 10 January 2012

On - Screen Number Pad Using JavaScript

It would be quite interesting if you provide an option to enter numbers using an on-screen number pad in your website. Since most of the new mobile devices doesn't come with a separate number pad, it is difficult to enter numbers fast. So providing an on-screen number pad would be a good alternative.
Here I have described a simple on-screen number pad developed using CSS, HTML and JavaScript.

Description
The number pad described here consist of twelve buttons. Ten of them represents each digit and the last two represents backspace and clear. They are arranged as seen in a typical number pad. A screen shot of the on-screen number pad is shown below.

Functions
To implement the on-screen number pad, three JavaScript functions are used. Each of them are described below. All the digits entered using the key pad is displayed in a textbox with id 'number'.

number_write(x)

This function is called every time a button representing a number is clicked. The argument 'x' denotes the number pressed. This function appends the number to the textbox.

number_clear()

This function clears all the data in the textbox. This function is called when the 'Clr' button on the number pad is clicked.

number_c()

This function deletes the last digit entered. It is similar to the backspace button in the keyboard. This function is called whenever the 'C' button on the on-screen keyboard is clicked.

Code
The complete code (CSS + HTML + JavaScript) is given below. It can be copied to a text editor and saved with '.html' file extension and opened using a web browser to see the results.

<html>
<head>
<title>On Screen Number Pad Using JavaScript</title>
<script type="text/javascript">
function number_write(x)
{
var text_box = document.getElementById("number");
if(x>=0 && x<=9)
{
if(isNaN(text_box.value))
text_box.value = 0;
text_box.value = (text_box.value * 10)+x;
}
}
function number_clear()
{
document.getElementById("number").value = 0;
}
function number_c()
{
var text_box = document.getElementById("number");
var num = text_box.value;
var num1 = num%10;
num -= num1;
num /= 10;
text_box.value = num;
}
</script>
<style type="text/css">
.main_panel
{
width:270px;
height:470px;
background-color:#999999;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
padding:20px;
}
.number_button
{
width:70px;
height:70px;
margin:10px;
float:left;
background-color:#FFFF99;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
font-size:36px;
text-align:center;
}
.number_button:hover
{
background-color:#66FF66;
}
.text_box
{
width:250px;
height:30px;
font-size:24px;
text-align:right;
}
</style>
</head>

<body>
<div class="main_panel">
<br />
<center><input class="text_box" type="text" id="number" name="num" /></center>
<br /><br />
<div class="number_button" onclick="number_write(1);">1</div>
<div class="number_button" onclick="number_write(2);">2</div>
<div class="number_button" onclick="number_write(3);">3</div>
<div class="number_button" onclick="number_write(4);">4</div>
<div class="number_button" onclick="number_write(5);">5</div>
<div class="number_button" onclick="number_write(6);">6</div>
<div class="number_button" onclick="number_write(7);">7</div>
<div class="number_button" onclick="number_write(8);">8</div>
<div class="number_button" onclick="number_write(9);">9</div>
<div class="number_button" onclick="number_clear();">Clr</div>
<div class="number_button" onclick="number_write(0);">0</div>
<div class="number_button" onclick="number_c();">C</div>
</div>
</body>
</html>

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

Count Characters Using JavaScript

A simple JavaScript function is presented here which can be used to count the number of characters typed in a text area. The numbers of characters can be displayed as it is typed and various actions can be taken according to the count on the fly.

Syntax

count(x);

Where 'x' is the reference to the text area. To execute this function after every key press, the following code should be added in the attributes of <textarea>.

onkeyup="count(this.value)"

Example

The function count(x) given in the code below does the following operations:

If count is less than 10, the count will be displayed in Yellow
If count is between 10 and 20, it will be displayed in Green
If count is greater than 20, it will be displayed in Red

Code

The complete code (HTML along with JavaScript) is given below. To see it in action, copy it to a text editor and save it with a file extension '.html'. Then open it using any browser.

<html>
<head>
<title>Count Characters In TextArea Using JavaScript</title>
<script type="text/javascript">
function count(x)
{
var len = x.length;
var count = document.getElementById("count");
if(len<10)
count.style.color = "#FFFF00";
else if(len<20)
count.style.color = "#00FF00";
else
count.style.color = "#FF0000";
count.innerHTML = x.length;
}
</script>
</head>

<body>
<textarea cols="50" rows="5" onkeyup="count(this.value)">
</textarea>
<div id="count"></div>
</body>
</html>

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>