Password Strength

<!-- Password Strength · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pstr-wrap"><input class="pstr-input" type="password" placeholder="Kies een wachtwoord" autocomplete="new-password"><div class="pstr-track"><span class="pstr-seg"></span><span class="pstr-seg"></span><span class="pstr-seg"></span><span class="pstr-seg"></span></div><div class="pstr-label">Voer een wachtwoord in</div></div>
</div>

/* Password Strength · NedDev · eigen werk. */
.pstr-wrap{width:300px;font-family:'Switzer',sans-serif}
.pstr-input{width:100%;box-sizing:border-box;padding:12px 14px;font-size:15px;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .2s}
.pstr-input:focus{border-color:#0a0a0a}
.pstr-track{display:flex;gap:6px;margin:10px 0 6px}
.pstr-seg{flex:1;height:5px;border-radius:3px;background:rgba(10,10,10,.12);transition:background .25s ease}
.pstr-label{font-size:12px;color:rgba(10,10,10,.55)}

// Password Strength · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.pstr-wrap')||root;var inp=root.querySelector('.pstr-input'),segs=root.querySelectorAll('.pstr-seg'),lbl=root.querySelector('.pstr-label');var cols=['#e23','#e80','#fb0','#3a9'],txt=['Zwak','Matig','Goed','Sterk'];
inp.addEventListener('input',function(){var v=inp.value,s=0;if(v.length>=8)s++;if(/[A-Z]/.test(v)&&/[a-z]/.test(v))s++;if(/[0-9]/.test(v))s++;if(/[^A-Za-z0-9]/.test(v))s++;if(v.length===0)s=0;segs.forEach(function(sg,i){sg.style.background=i<s?cols[s-1]:'rgba(10,10,10,.12)';});lbl.textContent=v.length===0?'Voer een wachtwoord in':txt[Math.max(0,s-1)];lbl.style.color=v.length===0?'rgba(10,10,10,.55)':cols[Math.max(0,s-1)];});
}
init(document.querySelector('.jouw-container'));