How to Build a Password Strength Meter in an Interview

How to Build a Password Strength Meter in an Interview

The password strength meter tests input handling and rule-based logic. Here is how to build it.

Requirements

• Password input field.
• Strength indicator (weak, medium, strong, very strong).
• Visual bar that changes color.
• Real-time feedback as the user types.
• Criteria checklist (length, uppercase, lowercase, number, special char).

Plan (5 minutes)

1. HTML: input, strength bar, criteria list.
2. State: password string.
3. Logic: check criteria, calculate score.
4. CSS: colored bar (red, yellow, green).

Build Core (40 minutes)

HTML

<input type="password" id="password" oninput="checkStrength()" placeholder="Enter password" />
<div class="strength-bar">
  <div class="strength-fill" id="strengthFill"></div>
</div>
<p id="strengthText">Enter a password</p>
<ul class="criteria" id="criteria">
  <li data-rule="length">At least 8 characters</li>
  <li data-rule="uppercase">Contains uppercase</li>
  <li data-rule="lowercase">Contains lowercase</li>
  <li data-rule="number">Contains number</li>
  <li data-rule="special">Contains special character</li>
</ul>

JavaScript

function checkStrength() {
  const password = document.getElementById("password").value;
  const rules = {
    length: password.length >= 8,
    uppercase: /[A-Z]/.test(password),
    lowercase: /[a-z]/.test(password),
    number: /[0-9]/.test(password),
    special: /[^A-Za-z0-9]/.test(password),
  };

  const score = Object.values(rules).filter(Boolean).length;

  const levels = ["Very Weak", "Weak", "Medium", "Strong", "Very Strong"];
  const colors = ["#ff4444", "#ff8844", "#ffaa00", "#44aa44", "#00aa44"];
  const index = Math.min(score, 5) - 1;

  const fill = document.getElementById("strengthFill");
  fill.style.width = (score / 5) * 100 + "%";
  fill.style.background = score > 0 ? colors[index] : "#ddd";

  document.getElementById("strengthText").textContent =
    password.length > 0 ? levels[index] : "Enter a password";

  document.querySelectorAll("#criteria li").forEach((li) => {
    const rule = li.dataset.rule;
    li.style.color = rules[rule] ? "green" : "gray";
    li.style.textDecoration = rules[rule] ? "line-through" : "none";
  });
}

CSS

.strength-bar { width: 100%; height: 8px; background: #ddd; border-radius: 4px; margin: 8px 0; }
.strength-fill { height: 100%; border-radius: 4px; transition: width 0.3s, background 0.3s; }
.criteria { list-style: none; padding: 0; }
.criteria li { padding: 2px 0; font-size: 14px; }

Edge Cases (20 minutes)

• Empty password (reset bar and text).
• Very long password (cap the score).
• Common password detection (optional: check against a list).
• Entropy-based scoring (optional: more accurate than rule-based).
• Debounce (not needed for password input, but consider for API checks).

The Takeaway

Build the password strength meter: HTML (input + bar + criteria list), JavaScript (check rules with regex, calculate score, update bar width/color and criteria styling), CSS (transition on bar). Handle edge cases (empty, very long, common passwords). This tests regex, DOM updates, and real-time feedback.