Create a random password generator using JavaScript

#javascript #tutorial #functional

In this tutorial we’ll be creating a random password generator using JavaScript. This could be used to encourage the use of strong passwords within a web application or simply to learn about JavaScript.

Let’s get started by setting up the HTML markup:

<div id="random-password">
  <input type="text" id="password" /> <button id="copy">Copy</button>
  <div id="settings">
    <label for="length">Length</label>
    <input type="number" id="length" value="16" min="8" max="64" />    
    <label for="numbers">Include Numbers</label>
    <input type="checkbox" id="numbers" checked />
    <label for="symbols">Include Symbols</label>
    <input type="checkbox" id="symbols" checked />
  </div>
  <button id="generate">Generate Password</button>
</div>

When viewed in a browser this will display the generated password along with a button to copy the password to the clipboard. It also will allow users to specify a length for the password and whether or not the password should contain numbers or symbols.

With the HTML setup we can move onto the JavaScript functionality. First thing we’ll do is define the characters that the password can contain. A strong password should contain a mix of lowercase and uppercase letters, numbers and symbols as follows:

const alpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const numbers = "0123456789";
const symbols = "!@#$%^&*_-+=";

Next we’ll declare variables for each of the DOM elements we’ll be working with:

const passwordTxt = document.getElementById("password");
const length = document.getElementById("length");
const incNumbers = document.getElementById("numbers");
const incSymbols = document.getElementById("symbols");
const generateBtn = document.getElementById("generate");

When the “Generate Password” is clicked we’ll create a string with the allowed characters based on length specified and the options selected. This data is then passed to the generatePassword function:

generateBtn.addEventListener("click", () => {
  let characters = alpha;
  incNumbers.checked ? (characters += numbers) : "";
  incSymbols.checked ? (characters += symbols) : "";
  passwordTxt.value = generatePassword(length.value, characters);
});

And here is the generatePassword function that creates the password:

const generatePassword = (length, characters) => {
  let password = "";
  for (let i = 0; i < length; i++) {
    password += characters.charAt(
      Math.floor(Math.random() * characters.length)
    );
  }
  return password;
};

Finally the functionality for copy to clipboard button:

const copyBtn = document.getElementById("copy");
copyBtn.addEventListener("click", () => {
  passwordTxt.select();
  document.execCommand("copy");
  alert("Password Copied");
});

You should now be able to generate a random password. You can test the password strength here. As you’ll see the passwords generated are very strong due to the randomness and different characters used.

Top comments (4)

webbureaucrat • Mar 5 '21 • Edited

This would probably be fine for a lot of use cases, but it might mislead someone to use cryptographically-insecure sources of randomness for things like encryption keys. I really think you should consider revising the post, at least to mention the limitations of this approach.