Password Strength Meter

<div class="ps">
  <label>Password</label>
  <div class="ps-field"><input type="password" id="psInput" placeholder="Type a password…"><button id="psEye" aria-label="Show">👁</button></div>
  <div class="ps-meter"><span id="psBar"></span></div>
  <div class="ps-text" id="psText">Strength</div>
  <ul class="ps-rules" id="psRules">
    <li data-r="len">At least 8 characters</li>
    <li data-r="case">Upper &amp; lowercase letters</li>
    <li data-r="num">A number</li>
    <li data-r="sym">A symbol</li>
  </ul>
</div>

*{box-sizing:border-box}
.ps{width:320px;max-width:100%;font-family:system-ui,sans-serif}
.ps label{font-size:13px;font-weight:600;color:#5a627a}
.ps-field{position:relative;margin:6px 0 12px}
.ps-field input{width:100%;padding:12px 44px 12px 14px;border:1px solid #d8dce6;border-radius:10px;font-size:15px;outline:none}
.ps-field input:focus{border-color:#5b6cff;box-shadow:0 0 0 3px rgba(91,108,255,.16)}
.ps-field button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:0;cursor:pointer;font-size:16px;opacity:.6}
.ps-meter{height:7px;background:#eceef3;border-radius:999px;overflow:hidden}
.ps-meter span{display:block;height:100%;width:0;border-radius:999px;transition:width .3s,background .3s}
.ps-text{margin-top:8px;font-size:13px;font-weight:700;color:#9099ad}
.ps-rules{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.ps-rules li{font-size:13px;color:#9099ad;padding-left:24px;position:relative;transition:color .2s}
.ps-rules li::before{content:'○';position:absolute;left:0;top:-1px}
.ps-rules li.ok{color:#16a34a}
.ps-rules li.ok::before{content:'●'}

var input=document.getElementById('psInput'),bar=document.getElementById('psBar'),text=document.getElementById('psText'),rules=document.getElementById('psRules');
var COLORS=['#ef4444','#f59e0b','#eab308','#16a34a'],LABELS=['Weak','Fair','Good','Strong'];
document.getElementById('psEye').onclick=function(){input.type=input.type==='password'?'text':'password'};
input.addEventListener('input',function(){
  var v=input.value,checks={len:v.length>=8,case:/[a-z]/.test(v)&&/[A-Z]/.test(v),num:/[0-9]/.test(v),sym:/[^A-Za-z0-9]/.test(v)};
  var score=0;for(var k in checks){var li=rules.querySelector('[data-r="'+k+'"]');li.classList.toggle('ok',checks[k]);if(checks[k])score++}
  var pct=v?Math.max(score,1)/4*100:0;bar.style.width=pct+'%';
  if(v){bar.style.background=COLORS[score-1]||COLORS[0];text.textContent=LABELS[score-1]||LABELS[0];text.style.color=COLORS[score-1]||COLORS[0]}
  else{text.textContent='Strength';text.style.color='#9099ad'}
});