DEV Community

Michael Burrows
Michael Burrows

Posted on • Originally published at


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 />
  <button id="generate">Generate Password</button>
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", () => {;
  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.

Top comments (4)

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.

patarapolw profile image
Pacharapol Withayasakpunt • Edited

For passwords, at least use window.crypto.

Or perhaps something like

jankapunkt profile image
Jan Küster

Documentation for Web Crypto API:

darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

I fail to see what is #functional about this 🤷

Nice post though :D

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post