Password Generator In Javascript

In this article, we are going to create a random password generator app in javascript. This password generation using this app is customizable:

The password creates using this app very strong password since it includes all number, symbol, uppercase and lowercase strings and can be as long as 20 characters.

Here is a preview of the app.

password generator app in javascript Test the app

Why do we need a strong password?

Since the password is the first defence against unauthorized access to your accounts or devices, we need a stronger password to prevent attacks from hackers. Simple passwords with just uppercase or lowercase letters are pretty easy to crack. Passwords with a good combination of numbers, symbols, uppercase and lowercase letter are very tough to crack.

More complex the password is more secure and strong it is.


How to make a password generator in javascript?

In this tutorial, we will create a password generator in javascript. To create a password generator we will go through 3 steps:

  1. Creating HTML for password generator
  2. Designing a password generator with CSS
  3. Writing Javascript code for password generator

Random password generator tutorial

1. Creating HTML for password generator

Let's create the structure of the password generator first using HTML. We need to create the following items in the password generator:

  1. A box to show the generated password and a copy button to copy the password.
  2. An input box for taking input for the length of the password.
  3. 4 checkbox for taking input as to include number, symbol, uppercase and lowercase in password or not
  4. A button to run the code that generates the password.

After creating these items we will wrap these items in <div> element and add classes to it for styling purpose.

Ⅰ. Creating a box to show password.

first create a <p> tag to show the password and add 'passwordBox' id to it, also create a copy icon button using font-awesome icon. Now wrap these 2 item in a single <div> element with CSS class of 'password'.

        
      

Ⅱ. Creating input box for taking password length as input.

Now create an input box for the length of the password using <input> tag, with 'type' number. Create a label for it and provide 'min', 'max' and value attributes to it.

Add 'length' as an id to <input> tag and wrap both <label> tag and <input> tag in <div> element.

        
      

Ⅲ. Creating checkbox for selecting type of characters in password.

We will now create 4 checkboxes for number, symbol, lowerCase and upperCase respectively for selecting the type of characters to add in the password and wrap each of these inputs in a <input> element.

        
      

Ⅳ. Creating a password generator button.

Now create a button and add onclick event to it with "createPassword()" function.

        
      

Add font-awesome CDN in the head for the icon. Here is the complete HTML code password generator.

        
      

This is the output of the HTML code.

html output for random password generator

2. Designing a password generator with CSS

Now use CSS to style the app to look beautiful. We are using CSS flexbox property to align-items.

Using "display:flex;align-items:center;justify-content:center" on '.container' class to align app vertically and horizontally in center of the screen.

By adding other basic CSS styles to the classes we achieve the final look. Look at the full CSS code below. Adding this code to the app will create the final look of the app.

        
      

3. Writing Javascript code for random password generator

Now its time to create logic for password generator. To create a random password we must first know, how to create a random number in javascript?.

To create a random number we use Math.random() method. It returns a number between 0 and 1. We will use this concept to randomly select character type and a character from that character type.

Define the different types of character strings

We create 4 strings that contain different data type characters numbers, symbols, upperCase and lowerCase letters to use further in the code.

Using these string create an object named keys.

        
      

Creating a function that returns 1 random character from these strings

Now we create a function for each of the above strings that returns a random character from the string.

The function generates a random number from 0 to length of string - 1 and then returns the character at that index value from the specified string.

Math.floor(Math.random() * string.length create a random number between 0 to length of string - 1.

Now create an array an pull all these function in the array as array members. Look at the code below. We put all these function in an array because we will further create a random number between 0 and length of array to get a random function.

        
      

Creating a random password generator function

Let's now create a password generator function. First, check if at least one checkbox is checked for the function to proceed. If none of the checkboxes is checked then return the function.

To check if at least one checkbox is checked grab all checkbox using document.getElementById access method, and check if it is checked using the checked property. It returns a boolean value.

Add all these boolean value and if it is 0 then all checkbox are unchecked.

        
      

Now create an empty string named 'password' and run a while loop until the length of 'password' string becomes equal to the length of the input password.

In each iteration of this loop create a random number between 0 and length of function array (0-4). Now check if checkbox with the same name as the function is checked if it is checked then run the function and add the returned character to our password.

This loop will run until password length becomes equal to the desired length of the password. And finally set the password as innerHTML of the password box.

Here is full code of 'createPassword()' function.

        
      

Create function to copy the code

This the the code to create a copy code functionality. It will copy the code to the clipboard of the device.

        
      

Complete Javascript code