Calculate Password Strength

Start the strength feature by calculating data only. Do not update the page from this function yet.

1. Add the indicator references

Near the other DOM references:

javascript

const bars = [...document.querySelectorAll("#strengthBars i")];
const strengthBadge = $("strengthBadge");
const strengthText = $("strengthText");

2. Build the score

Add:

javascript

function calculateStrength(password, characterTypeCount) {
  let score = 0;

  if (password.length >= 8) score += 1;
  if (password.length >= 12) score += 1;
  if (password.length >= 16) score += 1;
  if (characterTypeCount >= 3) score += 1;
  if (characterTypeCount >= 4) score += 1;
  if (password.length >= 20 && characterTypeCount >= 3) score += 1;

  return Math.min(score, 6);
}

3. Connect it to generation

After creating password in generatePassword(), store the result:

javascript

const strengthScore = calculateStrength(password, enabled.length);

Temporarily log the score and test different lengths/options. Remove the log afterward.

Checkpoint

Strength is now a separate calculation that returns a predictable value from 0 to 6.