DEV Community

loading...

Create a random password generator using JavaScript

Michael Burrows
Web Developer @ w3collective.com
Originally published at w3collective.com ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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 = "!@#$%^&*_-+=";
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

Finally the functionality for copy to clipboard button:

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

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.

Discussion (4)

Collapse
webbureaucrat profile image
webbureaucrat • 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.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited

For passwords, at least use window.crypto.

Or perhaps something like github.com/davidbau/seedrandom

Collapse
jankapunkt profile image
Jan Küster

Documentation for Web Crypto API: developer.mozilla.org/en-US/docs/W...

Collapse
darkwiiplayer profile image
DarkWiiPlayer

I fail to see what is #functional about this 🤷

Nice post though :D