Strong Password Generator

<div class="pw-card">
  <div class="pw-screen">
    <input type="text" id="pw-output" readonly value="P@ssw0rd123!">
    <button id="copy-pw-btn" title="Copy Password"><i class="far fa-copy"></i></button>
  </div>

  <div class="strength-bar-wrapper">
    <div class="strength-meter">
      <div id="strength-fill" class="strength-fill"></div>
    </div>
    <span id="strength-text" class="strength-text">Medium</span>
  </div>

  <div class="settings-group">
    <div class="setting-item">
      <div class="label-row">
        <span>Password Length</span>
        <span id="len-value" class="len-val">14</span>
      </div>
      <input type="range" id="len-slider" min="6" max="32" value="14">
    </div>

    <div class="checkbox-grid">
      <label class="check-item">
        <input type="checkbox" id="chk-upper" checked>
        <span>Uppercase (A-Z)</span>
      </label>
      <label class="check-item">
        <input type="checkbox" id="chk-lower" checked>
        <span>Lowercase (a-z)</span>
      </label>
      <label class="check-item">
        <input type="checkbox" id="chk-numbers" checked>
        <span>Numbers (0-9)</span>
      </label>
      <label class="check-item">
        <input type="checkbox" id="chk-symbols" checked>
        <span>Symbols (!@#$)</span>
      </label>
    </div>
  </div>

  <button id="generate-pw-btn" class="btn-gen-pw">
    <i class="fas fa-shield-alt"></i> Generate Password
  </button>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: #0f172a;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pw-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 24px;
  padding: 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.pw-screen {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.pw-screen input {
  flex: 1;
  background: transparent;
  border: none;
  color: #38bdf8;
  font-family: monospace;
  font-size: 1.15rem;
  padding: 8px 12px;
  outline: none;
}
.pw-screen button {
  background: #334155;
  border: none;
  color: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.pw-screen button:hover {
  background: #14b8a6;
}
.strength-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.strength-meter {
  flex: 1;
  height: 6px;
  background: #334155;
  border-radius: 3px;
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 60%;
  background: #f59e0b;
  transition: width 0.3s, background 0.3s;
}
.strength-text {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #f59e0b;
  min-width: 70px;
  text-align: right;
}
.settings-group {
  margin-bottom: 24px;
}
.setting-item {
  margin-bottom: 18px;
}
.label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #94a3b8;
}
.len-val {
  color: #14b8a6;
  font-weight: 700;
}
.setting-item input[type="range"] {
  width: 100%;
  accent-color: #14b8a6;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #cbd5e1;
  cursor: pointer;
}
.check-item input {
  accent-color: #14b8a6;
  width: 16px;
  height: 16px;
}
.btn-gen-pw {
  width: 100%;
  background: #14b8a6;
  color: #0f172a;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.btn-gen-pw:hover {
  opacity: 0.9;
}

const pwOutput = document.getElementById('pw-output');
const copyBtn = document.getElementById('copy-pw-btn');
const lenSlider = document.getElementById('len-slider');
const lenValue = document.getElementById('len-value');
const chkUpper = document.getElementById('chk-upper');
const chkLower = document.getElementById('chk-lower');
const chkNumbers = document.getElementById('chk-numbers');
const chkSymbols = document.getElementById('chk-symbols');
const strengthFill = document.getElementById('strength-fill');
const strengthText = document.getElementById('strength-text');
const generateBtn = document.getElementById('generate-pw-btn');

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

function generatePassword() {
  let length = parseInt(lenSlider.value);
  let pool = '';

  if (chkUpper.checked) pool += charSets.upper;
  if (chkLower.checked) pool += charSets.lower;
  if (chkNumbers.checked) pool += charSets.numbers;
  if (chkSymbols.checked) pool += charSets.symbols;

  if (!pool) {
    pwOutput.value = 'Select at least 1 option!';
    updateStrength(0);
    return;
  }

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

  pwOutput.value = password;
  evaluateStrength(password);
}

function evaluateStrength(pw) {
  let score = 0;
  if (pw.length >= 8) score++;
  if (pw.length >= 14) score++;
  if (/[A-Z]/.test(pw)) score++;
  if (/[0-9]/.test(pw)) score++;
  if (/[^A-Za-z0-9]/.test(pw)) score++;

  updateStrength(score);
}

function updateStrength(score) {
  if (score <= 2) {
    strengthFill.style.width = '30%';
    strengthFill.style.background = '#ef4444';
    strengthText.textContent = 'Weak';
    strengthText.style.color = '#ef4444';
  } else if (score <= 4) {
    strengthFill.style.width = '65%';
    strengthFill.style.background = '#f59e0b';
    strengthText.textContent = 'Medium';
    strengthText.style.color = '#f59e0b';
  } else {
    strengthFill.style.width = '100%';
    strengthFill.style.background = '#10b981';
    strengthText.textContent = 'Strong';
    strengthText.style.color = '#10b981';
  }
}

lenSlider.addEventListener('input', (e) => {
  lenValue.textContent = e.target.value;
  generatePassword();
});

[chkUpper, chkLower, chkNumbers, chkSymbols].forEach(chk => {
  chk.addEventListener('change', generatePassword);
});

generateBtn.addEventListener('click', generatePassword);

copyBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(pwOutput.value).then(() => {
    copyBtn.innerHTML = '<i class="fas fa-check" style="color:#10b981"></i>';
    setTimeout(() => {
      copyBtn.innerHTML = '<i class="far fa-copy"></i>';
    }, 1500);
  });
});

generatePassword();