How to Build a Random Password Generator with JavaScript

Creating a Random Password Generator is one of the best beginner JavaScript projects. It teaches you how to work with variables, loops, strings, functions, and random numbers while building a useful real-world application.

By the end of this tutorial, you'll understand exactly how JavaScript creates a password one character at a time.

---

What Is a Random Password Generator?

A Random Password Generator automatically creates secure passwords instead of typing them manually.

Example Password:

hT9@Lm2#Qz

Every time you click the Generate button, JavaScript creates a completely different password.

---

How Does It Work?

The process is very simple.

1. Store all possible characters.
2. Pick one random character.
3. Add it to the password.
4. Repeat until the password is complete.

Characters
      ↓
Random Character
      ↓
Add to Password
      ↓
Repeat
      ↓
Final Password

---

Step 1 — Create the HTML

<div class="container">
    <h1>Random Password Generator</h1>

    <input type="text" id="password" readonly>

    <button id="generateBtn">
        Generate Password
    </button>
</div>

Explanation

• The heading tells users what the project does.
• The input displays the generated password.
• The button creates a new password.

---

Step 2 — Select HTML Elements

const passwordInput = document.getElementById("password");
const generateBtn = document.getElementById("generateBtn");

JavaScript needs to know which elements it should work with.

getElementById() finds an element using its ID.

---

Step 3 — Store All Characters

const characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";

This string contains every character JavaScript is allowed to use.

• Uppercase letters
• Lowercase letters
• Numbers
• Special symbols

Think of it like a box full of characters. JavaScript randomly picks characters from this box.

---

Step 4 — Choose Password Length

const passwordLength = 12;

This means every generated password will contain 12 characters.

Example:

mK7@Q9!tRs4#

---

Step 5 — Create an Empty Password

let newPassword = "";

Initially, the password is empty.

""

JavaScript will slowly build the password by adding one character at a time.

---

Step 6 — Repeat Using a Loop

for (let i = 0; i < passwordLength; i++) {

}

If the password length is 12, the loop runs 12 times.

Each loop adds one new character.

---

Step 7 — Generate a Random Number

const randomIndex =
Math.floor(Math.random() * characters.length);

What does this line do?

characters.length tells JavaScript how many characters exist.

Math.random() creates a random decimal number.

0.23
0.91
0.52

After multiplying, JavaScript gets a random decimal.

17.8
43.2
69.5

Finally, Math.floor() removes the decimal.

17
43
69

---

Step 8 — Pick a Random Character

characters[randomIndex]

Suppose:

randomIndex = 25

JavaScript looks at character number 25.

It might return:

Q

Or

7

Or

@

---

Step 9 — Add It to the Password

newPassword += characters[randomIndex];

This is the most important line.

The += operator means:

Add the new character to the existing password.

Example:

Start

newPassword = ""

↓

Random Character

A

↓

newPassword = "A"

↓

Random Character

7

↓

newPassword = "A7"

↓

Random Character

@

↓

newPassword = "A7@"

↓

Random Character

k

↓

newPassword = "A7@k"

The loop repeats until the password reaches the desired length.

---

Step 10 — Display the Password

passwordInput.value = newPassword;

This displays the generated password inside the input field.

X7@mLp29!Qa#

---

Final JavaScript Code

const passwordInput = document.getElementById("password");
const generateBtn = document.getElementById("generateBtn");

const characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";

const passwordLength = 12;

generateBtn.addEventListener("click", () => {

    let newPassword = "";

    for (let i = 0; i < passwordLength; i++) {

        const randomIndex =
        Math.floor(Math.random() * characters.length);

        newPassword += characters[randomIndex];

    }

    passwordInput.value = newPassword;

});

---

What You Learned

• Variables
• Strings
• Loops
• Functions
• Math.random()
• Math.floor()
• DOM Manipulation
• Event Listeners
• String Concatenation using +=

---

Common Beginner Mistakes

1. Forgetting Math.floor()

Without Math.floor(), JavaScript creates decimal numbers, which cannot be used as indexes.

2. Using = Instead of +=

Wrong:

newPassword = characters[randomIndex];

Correct:

newPassword += characters[randomIndex];

Using = replaces the password every time. Using += keeps adding new characters.

3. Forgetting to Reset the Password

let newPassword = "";

Always reset the password before generating a new one.

---

Challenge Yourself

• Add a Copy Password button.
• Allow users to choose password length.
• Add uppercase and lowercase options.
• Add numbers and symbols options.
• Create a Password Strength Meter.

---

Conclusion

A Random Password Generator is an excellent beginner JavaScript project because it combines real-world functionality with essential programming concepts. While building this project, you practice variables, loops, random numbers, DOM manipulation, and event listeners.

Once you understand this project, you'll be ready to build more exciting JavaScript Applications.