パスワード表示切替+強度メーター

<div class="d04-02-08-wrap">
          <div class="d04-02-08-field">
            <input type="password" placeholder="パスワード" aria-label="パスワード">
            <button type="button" class="d04-02-08-eye" aria-label="パスワードを表示">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/>
                <circle cx="12" cy="12" r="3"/>
                <line class="d04-02-08-slash" x1="4" y1="4" x2="20" y2="20" style="display:none"/>
              </svg>
            </button>
          </div>
          <div class="d04-02-08-meter"><span class="d04-02-08-fill"></span></div>
          <p class="d04-02-08-note">8文字以上・英数字混在を推奨</p>
        </div>

.d04-02-08-wrap{width:min(270px,100%)}
        .d04-02-08-field{position:relative}
        .d04-02-08-field input{
          width:100%;padding:12px 44px 12px 14px;font-size:14px;
          border:2px solid #d5d9e0;border-radius:8px;background:#fff;
          outline:none;transition:border-color .25s;
        }
        .d04-02-08-field input:focus{border-color:#4a6cf7}
        .d04-02-08-eye{
          position:absolute;right:8px;top:50%;transform:translateY(-50%);
          border:none;background:none;color:#8a93a3;cursor:pointer;
          padding:6px;display:flex;
        }
        .d04-02-08-eye:hover{color:#4a6cf7}
        .d04-02-08-meter{
          height:6px;margin-top:12px;border-radius:3px;background:#e4e8ef;
          overflow:hidden;
        }
        .d04-02-08-fill{
          display:block;height:100%;width:0;border-radius:3px;
          background:#e5484d;
          transition:width .35s ease,background .35s ease;
        }
        .d04-02-08-note{margin:8px 0 0;font-size:11px;color:#8a93a3}

(function(){
        var wrap=document.querySelector('.d04-02-08-wrap');
        if(!wrap)return;
        var input=wrap.querySelector('input');
        var eye=wrap.querySelector('.d04-02-08-eye');
        var slash=wrap.querySelector('.d04-02-08-slash');
        var fill=wrap.querySelector('.d04-02-08-fill');
        eye.addEventListener('click',function(){
          var show=input.type==='password';
          input.type=show?'text':'password';
          slash.style.display=show?'':'none';
          eye.setAttribute('aria-label',show?'パスワードを隠す':'パスワードを表示');
        });
        input.addEventListener('input',function(){
          var v=input.value,score=0;
          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(v.length===0)score=0;
          else if(score===0)score=1;
          var widths=[0,25,50,75,100];
          var colors=['#e5484d','#e5484d','#f5a623','#8bc34a','#22b573'];
          fill.style.width=widths[score]+'%';
          fill.style.background=colors[score];
        });
      })();