main

Javascript password generator tutorial

In this article, we will show you how to create a simple Javascript password generator. The random password generator will create random and strong passwords. They will be generated on the local device and no one can recognize them. Let's create function for our generator

Contents of tutorial

  1. Function generate
  2. Password characters
  3. Complete variables
  4. The generator
  5. HTML page
  6. Complete generator
  7. Source code on GitHub

Step 1. Function generate

Let's create function for our generator

1
2
3
function generate(){
	
}

Save your code to file generator.js

Step 2. Password characters

Our random password will contain uppercase, lowercase characters, numbers and ASCII symbols. Add to our function next lines

1
2
3
4
5
6
function generate(){
    var uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var lowercase = 'abcdefghijklmnopqrstuvwxyz';
    var numbers = '0123456789';
    var symbols = '!"#$%&\'()*+,-./:;<=>?@^[\\]^_`{|}~';
}

Save your code

Step 3. Complete variables

Now we should combine characters and add a variable for the resulting password.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function generate(){
    var uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var lowercase = 'abcdefghijklmnopqrstuvwxyz';
    var numbers = '0123456789';
    var symbols = '!"#$%&\'()*+,-./:;<=>?@^[\\]^_`{|}~';

    var all = uppercase + lowercase + numbers + symbols;

    var password = '';
}

Create function's parameter for setting resulting password length. Let's make it 12 by default.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function generate( length = 12 ){
    var uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var lowercase = 'abcdefghijklmnopqrstuvwxyz';
    var numbers = '0123456789';
    var symbols = '!"#$%&\'()*+,-./:;<=>?@^[\\]^_`{|}~';

    var all = uppercase + lowercase + numbers + symbols;

    var password = '';
}

Save your code

Step 4. The generator

In next lines of the code we will realize the generator core using Javascript's Math module. We will randomly choose one character from the entier set of the characters in cycle for.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function generate( length = 12 ){
    var uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var lowercase = 'abcdefghijklmnopqrstuvwxyz';
    var numbers = '0123456789';
    var symbols = '!"#$%&\'()*+,-./:;<=>?@^[\\]^_`{|}~';

    var all = uppercase + lowercase + numbers + symbols;

    var password = '';

    for (var index = 0; index < length; index++) {
        var character = Math.floor(Math.random() * all.length);
        password += all.substring(character, character + 1);
    }

    return password;
}

Save your code

Step 5. HTML page

Let's create a simple html page with a button for our password generator.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple Password Generator</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">	    
</head>
<body>
	<div style="width:320px;margin:0 auto;text-align:center">
		<button id="generate">Generate</button>
		<input type="text" placeholder="Your password...">
	</div>
</body>
</html>

Save this as index.html

Step 6. Complete generator

Now we will connect our generator from generator.js to our HTML page. And add handler for button "Generate".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple Password Generator</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="generator.js" async></script>
	<script>
		window.onload = function (){
			var generateButton = document.querySelector('#generate');
			generateButton.addEventListener('click', function(){				
				document.querySelector('#password').value = generate();
			});
		}
	</script>	    
</head>
<body>
	<div style="width:320px;margin:10% auto 0 auto;text-align:center">
		<button id="generate">Generate</button>
		<input id="password" type="text" placeholder="Your password...">
	</div>
</body>
</html>

Save your code.

Simple random password generator is complete now. And you can try to open index.html in your browser and click button "Generate".

screenshot of browser

Check out this code on GitHub.