title: Password Strength Meter
body: <p>I have to make a password meter from scratch basically (can't use outside frameworks like jquery), and I'm having 2 problems.</p>
  
  <p>I can't seem to find a way where when a user enters a certain character, it won't jump the meter to a huge length.</p>
  
  <p>And I can't prevent that meter from getting to big, even by setting the width.</p>
  
  <pre><code>&lt;input type="password" id="newPass" style="width:206px" onkeyup="strengthMeter()"/&gt;&lt;br/&gt;&lt;br/&gt;
                  &lt;div style="width:100px;display:inline;"&gt;&lt;div id="meter" style="background-color:red;width:10px;height:10px;"&gt;&lt;/div&gt;
                      &lt;span&gt;Strength&lt;/span&gt;&lt;span id="strength" style="float:right"&gt;Weak&lt;/span&gt;
                  &lt;/div&gt;
  
  function strengthMeter(){
  
  
      var password = $("newPass").value;
      var numEx = /\d/;
      var lcEx = new RegExp("[a-z]");
      var ucEx = new RegExp("[A-Z]");
      var symbols = ['/', '@', '#', '%', '&amp;', '.', '!', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\'];
      var meterMult = 1;
  
      for(var k = 0; k &lt; password.length; k++){
          if(numEx.test(password)){
              meterMult += 0.75;
              $("meter").style.width = " " + (10*meterMult) + "px";
          }
  
          if(ucEx.test(password)){
              meterMult += 1;
              $("meter").style.width = " " + (10*meterMult) + "px";
          }
  
          if(lcEx.test(password)){
              meterMult += 0.25;
              $("meter").style.width = " " + (10*meterMult) + "px";
          }
  
          for(var i = 0; i &lt; symbols.length; i++){
              if(password.indexOf(symbols[i]) &gt;= 0){
                  meterMult += 1;
                  $("meter").style.width = " " + (10*meterMult) + "px";
              }
              }
          if(meterMult &gt;= 12){
              $("strength").innerHTML = "Strong";
              }
          else if(k &gt;= 6){
              $("strength").innerHTML = "Medium";
          }
          else
              $("strength").innerHTML = "Weak";
          }
  
      }
  </code></pre>
  
  <p>The above has the div i am using to make the meter. basically, I am taking a div and expanding it within another div to make the meter, and that's that.  Please help! Thanks in advance.</p>