Create a random password generator using JavaScript
Tags: javascript, tutorial, functional
Published: 2021-03-04 21:59:33

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:

```html
<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:

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

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

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://www.comparitech.com/privacy-security-tools/password-strength-test/). As you’ll see the passwords generated are very strong due to the randomness and different characters used.