Tutorials Tonight's Logo

Random Password Generator JavaScript


In this tutorial, we are going to create a javascript password generator app. This app is going to be customizable as:

The password created using this app is going to be a very strong password, since it includes all keyword combinations like numbers, symbols, uppercase and lowercase alphabets and the length of the password is long.

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, so 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.

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


How to make a javascript password generator?

We are going to use HTML to create the structure of the app, CSS to design and style the app and JavaScript to create logic and other feature of the app.

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

JavaScript 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 the <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 for later access, also create a copy icon button using the font-awesome icon.

Now wrap these 2 item in a single <div> element with CSS class of 'password'. We will use this class later to style the elements.

<div class="password">
  <p id="passwordBox"></p><i class="far fa-clipboard" onclick="copyPassword()"></i></i>
</div>

Ⅱ. Creating an 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 attribute to it.

Add 'length' as an id to <input> tag and wrap both <label> tag and <input> tag in <div> element so that we may align is side by side.

<div>
  <label for="length">Length</label>
  <input type="number" id="length" min="6" max="20" value="6">
</div>

Ⅲ. Creating a checkbox for selecting the type of characters in the 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 an <input> element.

Again we will wrap each pair within an <div> element to align it side by side.

<div>
  <label for="symbol">Include Symbol</label>
  <input type="checkbox" id="symbol" checked>
</div>
<div>
  <label for="number">Include Number</label>
  <input type="checkbox" id="number" checked>
</div>
<div>
  <label for="lowerCase">Include lowerCase</label>
  <input type="checkbox" id="lowerCase" checked>
</div>
<div>
  <label for="upperCase">Include upperCase</label>
  <input type="checkbox" id="upperCase" checked>
</div>

Ⅳ. Creating a password generator button.

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

<button onclick="createPassword()">Get Random Password</button>

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

Here is the complete HTML code for the app.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Password Generator In Javascript</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
</head>

<body>
  <div class="container">
    <div class="password-generator">
      <h2>Password Generator</h2>
      <div class="password">
        <p id="passwordBox"></p><i class="far fa-clipboard" onclick="copyPassword()"></i></i>
      </div>
      <div>
        <label for="length">Length</label>
        <input type="number" id="length" min="6" max="20" value="6">
      </div>
      <div>
        <label for="symbol">Include Symbol</label>
        <input type="checkbox" id="symbol" checked>
      </div>
      <div>
        <label for="number">Include Number</label>
        <input type="checkbox" id="number" checked>
      </div>
      <div>
        <label for="lowerCase">Include lowerCase</label>
        <input type="checkbox" id="lowerCase" checked>
      </div>
      <div>
        <label for="upperCase">Include upperCase</label>
        <input type="checkbox" id="upperCase" checked>
      </div>
      <button onclick="createPassword()">Get Random Password</button>
    </div>
  </div>
</body>

</html>

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 properties to align-items.

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

Now apply the justify-content property to the div elements that we used to wrap the pairs of label and inputs to align at both ends of the element. i.e

.password-generator div {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

Finally, add 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.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #9b415c;
  height: 100vh;
}

.password-generator {
  padding: 40px;
  background-color: #6f2f42;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
}

.password-generator div {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.password {
  min-width: 280px;
  background-color: #431c27;
  color: rgb(199, 199, 199);
}

.password p {
  padding: 6px 10px;
}

.password i {
  background-color: rgba(0, 0, 0, 0.575);
  padding: 6px 10px;
}

.password-generator button {
  width: 100%;
  border: none;
  color: rgba(255, 255, 255, 0.699);
  background-color: #2c131a;
  padding: 10px;
}


3. Javascript code for random password generator

Now its time to create logic for the password generator. To proceed further we first must know, how to create a random number in javascript?. We will use random numbers to randomly select a character from a list of characters.

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

Defining different types of character strings

Let's create 4 strings that contain different types of characters numbers, symbols, upperCase and lowerCase letters to use further in the code.

Wrap these strings in an object named keys.

const keys = {
  upperCase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  lowerCase: "abcdefghijklmnopqrstuvwxyz",
  number: "0123456789",
  symbol: "!@#$%^&*()_+~\\`|}{[]:;?><,./-="
}

Creating a function that returns 1 random character from these strings

Now we will create a function for each of the above strings that returns a random character from the string, we will use these characters in the password.

The function generates a random number from 0 to length of string - 1 and then returns the character at that index value of the random number 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 and put all these functions in the array as array members. Look at the code below.

const getKey = [
  function upperCase() {
    return keys.upperCase[Math.floor(Math.random() * keys.upperCase.length)];
  },
  function lowerCase() {
    return keys.lowerCase[Math.floor(Math.random() * keys.lowerCase.length)];
  },
  function number() {
    return keys.number[Math.floor(Math.random() * keys.number.length)];
  },
  function symbol() {
    return keys.symbol[Math.floor(Math.random() * keys.symbol.length)];
  }
];

We put all these functions in an array because we will further create a random number between 0 and the length of the array to get a random function.

This means we will randomly pick a function that will randomly pick a character from their specified string.

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 values and if it is 0 then all checkbox is unchecked.

const upper = document.getElementById("upperCase").checked;
const lower = document.getElementById("lowerCase").checked;
const number = document.getElementById("number").checked;
const symbol = document.getElementById("symbol").checked;
if (upper + lower + number + symbol === 0) {
  alert("Please check atleast one box!");
  return;
}

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

In each iteration of this loop create a random number between 0 and the length of the function array (0-4). Now check if the 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 the 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.

function createPassword() {
  const upper = document.getElementById("upperCase").checked;
  const lower = document.getElementById("lowerCase").checked;
  const number = document.getElementById("number").checked;
  const symbol = document.getElementById("symbol").checked;
  if (upper + lower + number + symbol === 0) {
    alert("Please check atleast one box!");
    return;
  }
  const passwordBox = document.getElementById("passwordBox");
  const length = document.getElementById("length");
  let password = "";
  while (length.value > password.length) {
    let keyToAdd = getKey[Math.floor(Math.random() * getKey.length)];
    let isChecked = document.getElementById(keyToAdd.name).checked;
    if (isChecked) {
      password += keyToAdd();
    }
  }
  passwordBox.innerHTML = password;
}

Create a function to copy the code

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

function copyPassword() {
  const textarea = document.createElement('textarea');
  const password = document.getElementById("passwordBox").innerText;
  if (!password) { return; }
  textarea.value = password;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  textarea.remove();
  alert('Password copied to clipboard');
}

Complete Javascript code

const keys = {
  upperCase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  lowerCase: "abcdefghijklmnopqrstuvwxyz",
  number: "0123456789",
  symbol: "!@#$%^&*()_+~\`|}{[]:;?><,./-="
}
const getKey = [
  function upperCase() {
    return keys.upperCase[Math.floor(Math.random() * keys.upperCase.length)];
  },
  function lowerCase() {
    return keys.lowerCase[Math.floor(Math.random() * keys.lowerCase.length)];
  },
  function number() {
    return keys.number[Math.floor(Math.random() * keys.number.length)];
  },
  function symbol() {
    return keys.symbol[Math.floor(Math.random() * keys.symbol.length)];
  }
];

function createPassword() {
  const upper = document.getElementById("upperCase").checked;
  const lower = document.getElementById("lowerCase").checked;
  const number = document.getElementById("number").checked;
  const symbol = document.getElementById("symbol").checked;
  if (upper + lower + number + symbol === 0) {
    alert("Please check atleast one box!");
    return;
  }
  const passwordBox = document.getElementById("passwordBox");
  const length = document.getElementById("length");
  let password = "";
  while (length.value > password.length) {
    let keyToAdd = getKey[Math.floor(Math.random() * getKey.length)];
    let isChecked = document.getElementById(keyToAdd.name).checked;
    if (isChecked) {
      password += keyToAdd();
    }
  }
  passwordBox.innerHTML = password;
}
function copyPassword() {
  const textarea = document.createElement('textarea');
  const password = document.getElementById("passwordBox").innerText;
  if (!password) { return; }
  textarea.value = password;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  textarea.remove();
  alert('Password copied to clipboard');
}

Conclusion

We created a javascript random password generator app in this tutorial which customizable. It creates a strong password with variable length and the ability to select the type of characters in the password.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.