Render Strength Feedback

Now turn the score into the existing visual feedback.

1. Render the bars

Add a separate renderer:

function renderStrength(score) {
  bars.forEach((bar, index) => {
    bar.classList.toggle("active", index < score);
  });
}

2. Derive a label

Inside the same function, add:

const label = score >= 5 ? "Strong" : score >= 3 ? "Medium" : "Weak";

Then update the existing text:

strengthText.textContent = label;
strengthBadge.textContent = label === "Strong" ? "✓ Strong Password" : `${label} Password`;

3. Call the renderer

Replace your temporary score log with:

renderStrength(strengthScore);

Keep calculation and rendering separate: one produces data, the other changes the DOM.

Test

Generate weak, medium, and strong examples by changing length and character types. Confirm the bars, label, and badge change together.

Checkpoint

Every generated password now produces visible strength feedback without changing the prepared styles.