パスワード強度可視化バー

<div class="d04-11-03-wrap">
          <input type="password" class="d04-11-03-input" placeholder="パスワードを入力" aria-label="パスワード">
          <div class="d04-11-03-meter"><span class="d04-11-03-fill"></span></div>
          <p class="d04-11-03-label">強度: <span class="d04-11-03-txt">-</span></p>
        </div>

.d04-11-03-wrap{width:min(270px,100%)}
        .d04-11-03-input{width:100%;padding:12px 14px;font-size:14px;border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;transition:border-color .25s}
        .d04-11-03-input:focus{border-color:#4a6cf7}
        .d04-11-03-meter{height:6px;margin-top:10px;border-radius:3px;background:#e4e8ef;overflow:hidden}
        .d04-11-03-fill{display:block;height:100%;width:0;border-radius:3px;background:#e5484d;transition:width .35s ease,background .35s ease}
        .d04-11-03-label{margin:8px 0 0;font-size:12px;color:#8a93a3}
        .d04-11-03-txt{font-weight:700;color:#333}

(function(){
        var input=document.querySelector('.d04-11-03-input');
        var fill=document.querySelector('.d04-11-03-fill');
        var txt=document.querySelector('.d04-11-03-txt');
        if(!input||!fill||!txt)return;
        var labels=['-','弱い','やや弱い','普通','強い'];
        var colors=['#e5484d','#e5484d','#f5a623','#8bc34a','#22b573'];
        input.addEventListener('input',function(){
          var v=input.value,score=0;
          if(v.length===0){
            fill.style.width='0%';
            txt.textContent='-';
            txt.style.color='#333';
            return;
          }
          if(v.length>=8)score++;
          if(/[a-z]/.test(v)&&/[A-Z]/.test(v))score++;
          if(/\d/.test(v))score++;
          if(/[^A-Za-z0-9]/.test(v))score++;
          if(score===0)score=1;
          var widths=[0,25,50,75,100];
          fill.style.width=widths[score]+'%';
          fill.style.background=colors[score];
          txt.textContent=labels[score];
          txt.style.color=colors[score];
        });
      })();