Build a Password Generator in JavaScript

1What You Are Building

A password generator is a small web app that produces a random password from character sets the user chooses — lowercase, uppercase, digits, and symbols — at a length they control. You assemble a pool of allowed characters, then pick from it randomly until you reach the desired length.

The project is popular for beginners because it touches many core skills at once: reading form inputs, handling events, working with arrays and strings, and generating randomness safely. Best of all it needs no server, no database, and no libraries — just HTML, CSS, and a single JavaScript file you can open straight in a browser.

2How Password Generation Works

Generation follows a simple loop: build a string of every character that is allowed, then repeatedly pick a random index into that string and append the character there. Repeat until the password reaches the requested length.

• Read the length value and which checkboxes (lower, upper, numbers, symbols) are ticked.
• Concatenate the character sets the user enabled into one pool string.
• Loop from 0 to length, each time choosing a random character from the pool.
• Guarantee at least one character from each chosen set so the rules are always satisfied.
• Join the characters and display the result in a read-only field.

3Use Secure Randomness, Not Math.random()

The single most important decision in this project is which random source you use. Math.random() is fine for shuffling a game deck, but it is not cryptographically secure — its output can be predicted, which is exactly what you do not want in a password.

Browsers expose crypto.getRandomValues(), part of the Web Crypto API, which fills a typed array with cryptographically strong random numbers. Use it to pick each index into your character pool. The difference costs you nothing in complexity and everything in trustworthiness.

function randomIndex(max) {
  const arr = new Uint32Array(1);
  crypto.getRandomValues(arr);
  return arr[0] % max;
}

4Building the Interface

The UI is a length slider, four checkboxes, a display field, and a generate button. Keep the markup minimal and give every control an id so JavaScript can read its state.

Wire the button's click event to a generate() function, and optionally regenerate live whenever the slider moves so users see strength change in real time.

• <input type='range' id='length' min='6' max='64' value='16'>
• <input type='checkbox' id='upper' checked> Uppercase
• <input type='checkbox' id='numbers' checked> Numbers
• <input type='checkbox' id='symbols'> Symbols
• <button id='generate'>Generate</button>

5Writing the Generate Function

The generate function ties everything together: it reads inputs, builds the pool, guarantees coverage, fills the rest randomly, then shuffles so the guaranteed characters are not always at the front.

const sets = { lower: 'abcdefghijklmnopqrstuvwxyz', upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', numbers: '0123456789', symbols: '!@#$%^&*()-_=+' };
let pool = '', required = [];
for (const key of chosen) { pool += sets[key]; required.push(sets[key][randomIndex(sets[key].length)]); }
const chars = [...required];
while (chars.length < length) chars.push(pool[randomIndex(pool.length)]);
return shuffle(chars).join('');

6Adding Copy-to-Clipboard

A generator is only useful if users can grab the result quickly. The Clipboard API makes this a one-liner: navigator.clipboard.writeText(password) returns a promise you can confirm with a small 'Copied!' message.

The Clipboard API requires a secure context, meaning HTTPS or localhost. When you test by opening the file directly with a file:// URL some browsers block it, so serve the page locally with a tool like the VS Code Live Server extension.

• copyBtn.addEventListener('click', async () => {
• await navigator.clipboard.writeText(output.value);
• copyBtn.textContent = 'Copied!';
• setTimeout(() => copyBtn.textContent = 'Copy', 1500);
• });

7Showing a Strength Indicator

A colored strength bar helps users understand why length and variety matter. Rather than inventing a score, base it on simple, honest signals: the length and how many character sets are active.

Longer passwords with more character types have a larger space of possibilities, which is what makes them harder to guess. You can map that qualitatively to Weak, Fair, and Strong labels without pretending to compute a precise entropy figure.

• Fewer than 12 characters or only one set: label Weak.
• 12 to 16 characters with two or three sets: label Fair.
• 16 or more characters with three or four sets: label Strong.
• Update a colored bar's width and color to match the label.

8Best Practices

A few habits keep your generator secure and pleasant to use as you extend it.

• Always generate with crypto.getRandomValues(), never Math.random().
• Guarantee at least one character from each selected set, then shuffle.
• Never send generated passwords anywhere — keep everything client-side.
• Give the output field readonly so the value cannot be accidentally edited.
• Handle the empty-pool case gracefully instead of returning a blank string.

9Key Takeaways

The project is small but teaches durable lessons about randomness and DOM work.

• Build a pool from chosen sets, then pick characters randomly until you hit the length.
• crypto.getRandomValues() is the secure random source — Math.random() is not.
• Guarantee coverage of each set, then shuffle so patterns do not leak.
• The Clipboard API needs a secure context; serve over localhost or HTTPS.
• Everything runs in the browser, so no data ever leaves the user's machine.

10Frequently Asked Questions

Q: Why not just use Math.random() for a password generator? A: Math.random() is not cryptographically secure and its sequence can be predicted, which undermines the whole point of a password. crypto.getRandomValues() from the Web Crypto API gives cryptographically strong values and is available in every modern browser.

Q: How do I guarantee the password contains a number and a symbol? A: Before filling the rest of the password randomly, push one character from each selected set into the array. Then fill up to the length and shuffle the array so those guaranteed characters are not stuck at the start.

Q: Why does clipboard copy fail when I open the HTML file directly? A: navigator.clipboard requires a secure context. Opening via a file:// URL often blocks it. Run a local server such as VS Code Live Server or python -m http.server so the page loads over localhost.

Q: Is it safe to generate passwords in the browser? A: Yes, as long as everything stays client-side and you use secure randomness. The password is never transmitted, so nothing leaves the user's device.