Back to Projects Intermediate

Password Generator

Build a secure password generator with a live strength meter and one-click copy. Customize length and character types to create passwords as simple or complex as you need.

HTML, CSS, JavaScript ~1-2 hours to build Free source code

What You'll Learn

How to build and combine character pools using JavaScript strings and arrays
How to use Math.random() to pick characters for a truly random output
How to read checkbox and range input values in real time
How to calculate and visually display password strength with a dynamic bar
How to copy text to the clipboard using document.execCommand()

How It Works

Build the character pool

We store four character sets - uppercase, lowercase, numbers, symbols - in an object. Whichever checkboxes the user ticks, we concatenate those strings into one pool of allowed characters.

Pick random characters

A loop runs as many times as the chosen length. Each iteration calls Math.random() to pick a random index from the pool string and adds that character to the password.

Score strength and display

Strength is scored from 0-100 based on length and how many character types are active. The score drives both the animated progress bar colour (red ? amber ? green) and a text label.

Source Code

HTML Structure

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h1>&#128272; Password Generator</h1>
    <p class="subtitle">Generate secure, random passwords instantly</p>

    <div class="output-wrap">
      <span id="passwordDisplay">Click Generate &rarr;</span>
      <button class="copy-btn" id="copyBtn">Copy</button>
    </div>

    <div class="strength-wrap">
      <div class="strength-bar-bg">
        <div class="strength-bar" id="strengthBar"></div>
      </div>
      <span class="strength-label" id="strengthLabel"></span>
    </div>

    <p class="section-label">Length</p>
    <div class="length-row">
      <span>Characters</span>
      <span id="lengthValue">16</span>
    </div>
    <input type="range" id="lengthSlider" min="6" max="32" value="16">

    <p class="section-label">Include</p>
    <div class="checkboxes">
      <label class="checkbox-item">
        <input type="checkbox" id="uppercase" checked>
        <span>Uppercase</span>
      </label>
      <label class="checkbox-item">
        <input type="checkbox" id="lowercase" checked>
        <span>Lowercase</span>
      </label>
      <label class="checkbox-item">
        <input type="checkbox" id="numbers" checked>
        <span>Numbers</span>
      </label>
      <label class="checkbox-item">
        <input type="checkbox" id="symbols">
        <span>Symbols</span>
      </label>
    </div>

    <button class="generate-btn" id="generateBtn">&#9889; Generate Password</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

CSS

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 20px;
}
.card {
  background: #111118;
  border: 1px solid #1e1e30;
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 0 60px rgba(0, 255, 136, 0.06);
}
h1 {
  color: #00ff88;
  font-size: 1.45rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.subtitle {
  text-align: center;
  color: #555;
  font-size: 0.82rem;
  margin-bottom: 28px;
}
.output-wrap {
  background: #0d0d14;
  border: 1px solid #1e1e30;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 58px;
}
#passwordDisplay {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 1.05rem;
  color: #00ff88;
  letter-spacing: 1.5px;
  word-break: break-all;
  flex: 1;
  line-height: 1.5;
}
.copy-btn {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.copy-btn:hover { background: rgba(0, 255, 136, 0.2); }
.copy-btn.copied { background: rgba(0, 255, 136, 0.25); border-color: #00ff88; }
.strength-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.strength-bar-bg {
  flex: 1;
  height: 4px;
  background: #1e1e30;
  border-radius: 2px;
  overflow: hidden;
}
.strength-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.4s ease, background 0.4s ease;
}
.strength-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
  min-width: 60px;
  text-align: right;
}
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #00ff88;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.length-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.length-row span { color: #aaa; font-size: 0.9rem; }
#lengthValue {
  font-size: 1.2rem;
  font-weight: 800;
  color: #00ff88;
}
input[type="range"] {
  width: 100%;
  margin-bottom: 20px;
  accent-color: #00ff88;
  cursor: pointer;
}
.checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d0d14;
  border: 1px solid #1e1e30;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s;
  user-select: none;
}
.checkbox-item:hover { border-color: rgba(0, 255, 136, 0.3); }
.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00ff88;
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox-item span {
  font-size: 0.85rem;
  color: #bbb;
  font-weight: 500;
}
.generate-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #00cc6e, #00ff88);
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
.generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.3);
}
.generate-btn:active { transform: translateY(0); }

JavaScript Logic

JavaScript

const CHARS = {
  uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  lowercase: 'abcdefghijklmnopqrstuvwxyz',
  numbers:   '0123456789',
  symbols:   '!@#$%^&*()_+-=[]{}|;:,.<>?'
};

const lengthSlider    = document.getElementById('lengthSlider');
const lengthValue     = document.getElementById('lengthValue');
const generateBtn     = document.getElementById('generateBtn');
const copyBtn         = document.getElementById('copyBtn');
const passwordDisplay = document.getElementById('passwordDisplay');
const strengthBar     = document.getElementById('strengthBar');
const strengthLabel   = document.getElementById('strengthLabel');

lengthSlider.addEventListener('input', function () {
  lengthValue.textContent = this.value;
});

generateBtn.addEventListener('click', generatePassword);

function generatePassword() {
  const useUpper = document.getElementById('uppercase').checked;
  const useLower = document.getElementById('lowercase').checked;
  const useNums  = document.getElementById('numbers').checked;
  const useSyms  = document.getElementById('symbols').checked;
  const length   = parseInt(lengthSlider.value);

  let pool = '';
  if (useUpper) pool += CHARS.uppercase;
  if (useLower) pool += CHARS.lowercase;
  if (useNums)  pool += CHARS.numbers;
  if (useSyms)  pool += CHARS.symbols;

  if (!pool) {
    passwordDisplay.textContent = 'Select at least one option!';
    updateStrength(0);
    return;
  }

  let password = '';
  for (let i = 0; i < length; i++) {
    password += pool[Math.floor(Math.random() * pool.length)];
  }

  passwordDisplay.textContent = password;
  updateStrength(calcStrength(length, useUpper, useLower, useNums, useSyms));
  copyBtn.textContent = 'Copy';
  copyBtn.classList.remove('copied');
}

function calcStrength(len, u, l, n, s) {
  const types = [u, l, n, s].filter(Boolean).length;
  return (len / 32) * 50 + (types / 4) * 50;
}

function updateStrength(score) {
  strengthBar.style.width = score + '%';
  if (score === 0) {
    strengthBar.style.background = '#333';
    strengthLabel.textContent = '';
  } else if (score < 40) {
    strengthBar.style.background = '#ff4757';
    strengthLabel.textContent = 'Weak';
    strengthLabel.style.color = '#ff4757';
  } else if (score < 70) {
    strengthBar.style.background = '#ffa502';
    strengthLabel.textContent = 'Fair';
    strengthLabel.style.color = '#ffa502';
  } else if (score < 85) {
    strengthBar.style.background = '#2ed573';
    strengthLabel.textContent = 'Strong';
    strengthLabel.style.color = '#2ed573';
  } else {
    strengthBar.style.background = '#00ff88';
    strengthLabel.textContent = 'Very Strong';
    strengthLabel.style.color = '#00ff88';
  }
}

copyBtn.addEventListener('click', function () {
  const text = passwordDisplay.textContent;
  if (!text || text === 'Click Generate \u2192' || text === 'Select at least one option!') return;

  const ta = document.createElement('textarea');
  ta.value = text;
  ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none;';
  document.body.appendChild(ta);
  ta.select();
  document.execCommand('copy');
  document.body.removeChild(ta);

  copyBtn.textContent = 'Copied!';
  copyBtn.classList.add('copied');
  setTimeout(function () {
    copyBtn.textContent = 'Copy';
    copyBtn.classList.remove('copied');
  }, 2000);
});

generatePassword();