Full Password Example

<label for="password">Password:</label>
<input type="text" name="password" id="password">
<span id="passwordmeter"><span></span></span>
<span id="passwordmessage" aria-live="polite"></span>

#passwordmeter {
  display:inline-block;
  width:125px;
  height: 20px;
  border: 1px solid #666;
  vertical-align:middle;
}
#passwordmeter span {
  display:inline-block;
  height:1em;
  background-color: gray;
  width:25px;
  height: 20px;
}

document.getElementById('password').addEventListener('keyup',
    function(){
      // (1) Select the password meter and message elements.
      var meter = document.querySelector('#passwordmeter span');
      var msg = document.getElementById('passwordmessage');

      // (2) Calculate the strength of the password.
      var pw = get_pw_strength(this.value);

      // (3) Set the with of the password meter to a multiple of the score.
      meter.style.width = (pw.score+1) * 25 + 'px';

      /* (4) Set the color of the meter to
             a) red if the score < 3
             b) yellow if the score = 3
             c) green if the score = 4

         (5) Change the text of the passwort message element accordingly. */
      if (pw.score == 0) {
        meter.style.backgroundColor = 'red';
        msg.innerHTML = '<strong>Weak:</strong> Cracked instantly';
      } else if (pw.score < 3) {
        meter.style.backgroundColor = 'red';
        msg.innerHTML = '<strong>Weak:</strong> Cracked in ' + pw.crack_time;
      } else if (pw.score == 3) {
        meter.style.backgroundColor = 'yellow';
        msg.innerHTML = '<strong>Okay:</strong> Cracked in ' + pw.crack_time;
      } else {
        meter.style.backgroundColor = 'green';
        msg.innerHTML = '<strong>Strong:</strong> Cracked in ' + pw.crack_time;
      }

      /* (6) If the input is empty, there is no text output
             and the color of the meter is set to gray. */
      if (this.value == "") {
        meter.style.backgroundColor = 'gray';
        msg.innerHTML = ' ';
      }
  });