title: How can I use JavaScript to test for password strength in a way that returns the quality of the password in numeric form?
body: <p>This is the challenge below:</p>
  
  <blockquote>
    <p>Write an algorithm to check the validity of a password inputed by a
    user with the criteria below.  </p>
    
    <p>If these criteria at met, the user is returned a percentage value of
    how strong his/her password is: </p>
    
    <p>●At least 1 letter between lowercase  [ a - z ]  ->  25%</p>
    
    <p>●At least 1 letter between uppercase [ A - Z ]  ->  25% </p>
    
    <p>●At least 1 number between [ 0 - 9 ] -> 25% </p>
    
    <p>●At least 1 character from [ $@#&amp;! ] -> 25%</p>
    
    <p>If  these criteria are met, the user is sent a message according to
    condition met: </p>
    
    <p>●Minimum length of password is 6 (display a message)</p>
    
    <p>●Maximum length of password is 12</p>
  </blockquote>
  
  <p>For Html:</p>
  
  <pre><code>&lt;body&gt;
  
    &lt;form class="center-block"&gt;
  
  &lt;input type="text" id="password" autocomplete="off" class="form-control input-lg"&gt;
  
  &lt;progress max="100" value="0" id="meter"&gt;&lt;/progress&gt;
  
  &lt;button class="btn btn-success btn-lg btn-block"&gt;Show Password Strength&lt;/button&gt;
  
  &lt;/form&gt;
  
    &lt;div class="textbox text-center"&gt; password &lt;/div&gt;
    
  &lt;/body&gt;
  </code></pre>
  
  <p>For JavaScript:</p>
  
  <pre><code>var code
  =document.getElementById("password");
  
  var strengthbar= document.getElementById("meter");
  
  code.addEventListener("keyup", function(){checkpassword(code.value)
  
      })
   var display =document.getElementsByClassName("textbox")[0];
      function checkpassword(password)
      {
      var strength=0;
      if (password.match(/[a-z]+/)){
          strength+=1;
      }
      if (password.match(/[A-Z]+/)){
          strength+=1;
      }
      if (password.match(/[0-9]+/)){
          strength+=1;
      }
      if (password.match(/[$@#&amp;!]+/)){
          strength+=1;
  
          }
      if (password.length&lt;6){
      display.innerHTML="minimum number of characters is 6":
      }
  
      if (password.length&gt;12){
              display.innerHTML="maximum number of characters is 12";
  }
      switch(strength){
      case 0:
          strengthbar.value=0;
          break;
  
      case 1:
          strengthbar.value=25;
          break;
  
      case 2:
          strengthbar.value=50;
          break;
  
      case 3:
          strengthbar.value=75;
          break;
  
      case 4:
          strengthbar.value=100;
          break; }
  }
  </code></pre>
  
  <p>Above is my own solution to the problem. It isn't giving me any errors but the JavaScript is not generating any results on my html. </p>
  
  <p><a href="https://codepen.io/Ojomiba/pen/vjoxRG" rel="nofollow noreferrer">Here is a link to the pen I'm using</a></p>