Create a random password generator using JavaScript

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>Code language: HTML, XML (xml)

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 = "!@#$%^&*_-+=";Code language: JavaScript (javascript)

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");Code language: JavaScript (javascript)

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);
});Code language: JavaScript (javascript)

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;
};Code language: JavaScript (javascript)

Finally the functionality for copy to clipboard button:

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

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.