Random Password Generator using Javascript

In certain case we may want to provide a feature to the website user to generate a password. There are lots of options available to generate a password for user. But in this article, we are going to focus on how to generate a random password using javascript.

Before proceeding further, we have to figure out the workflow of the random password generator:

  1. In the webpage, there would be a button, clicking on this button, a randomly generated password would appear beside to the button.
  2. The password length should not be less than 8 character. (For our learning purpose we are going to generate 8 length password)
  3. The password is going to contain, lowercase letters, uppercase letters, numbers and special characters.

Random password generator using javascript

Step 01: Lets create the webpage first.

Launch xampp, create a project folder and create a index.html file and following code.

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

This is a sample webpage. This webpage is for practice purpose. I have successfully developed the webpage.

</body>

</html>

 

Step o2: Lets create, random password generate button and a box that would display, the generated password.

For this, I am going to use input field and button element.

<input type=”text” id=”password-projector” readonly/>

<Button id=”password-generator” name=”password-gen”>Generate Password</button>

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

<input type=”text” id=”password-projector” readonly/><br>

<Button id=”password-generator” name=”password-gen”>Generate Password</button>

</body>

</html>

In the input field, we have added readonly attribute. By this, the user could able to copy the generated password but would not able to modify.

To the input field we have assigned an id – password projector

To the button element, we have assigned id: password-generator

Step 03:

Lets create javascript function that would generate the random password.

The javascript function should create 8 length string upon clicking the button.

<script>
document.getElementById(“password-generator”).addEventListener(“click”,function(){
varkeySet=[“a”,”b”,”c”,”d”,”e”,”f”,”g”,”h”,”i”,”j”,”k”,”l”,”m”,”n”,”o”,”p”,”q”,”r”,”s”,”t”,”u”,”v”, “w”,”x”,”y”,”z”,”0″,”1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”9″,”A”,”B”,”C”,”D”,”E”,”F”,”G”,   “H”,”I”,”K”,”J”,”K”,”L”,”M”,”N”,”O”,”P”,”Q”,”R”,”S”,”T”,”U”,”V”,”W”,”X”,”Y”,”Z”, “@”,”#”,”$”,”%”,”^”,”&”,”*”];
var GeneratedPassword=””;
for(vari=0;i<8;i++){
GeneratedPassword+=keySet[Math.floor(Math.random()*keySet.length)];
}
document.getElementById(“password-projector”).value=GeneratedPassword;
});
</script>
The above code would listen first to click event. Upon click event, it is going to call the anonymous function which would generate the code.
In the anonymous function, we have created an array and provided all the string values we may want in the generated password and that is a-z, A-Z, 0-9, and special characters such as @, #, $, %,^,&, *
We want 8 length password, so we took help of loop. In each loop, it would concatenate with the previously generated string.
At the end of the loop, we would get 8 length string.
Note: In each loop we are passing randomly generated index number to keySet array. (Math.random is a javascript function which generates random number in between 0 and 1 and so we have multiplied the randomly generated number with total size of the array – keySet and also we have used Math.floor function. It excludes decimal values. This way we are getting a round figure number.)
Once the anonymous function generates the 8 length string, then we set it to the input field from which the user can copy.
Random Password Generator using Javascript Random Password Generator using Javascript Random Password Generator using Javascript