Complete Password Example

Back to page

No data is sent using the following example input field. The password is shown in plain text for demonstration purposes.

Code: HTML

<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>

Code: 'CSS

#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;
}

Code: 'JavaScript

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 password message element accordingly. */
        if (pw.score == 0) {
          meter.style.backgroundColor = 'red';
          msg.innerHTML = '<strong>Really Weak</strong> Password';
        } else if (pw.score < 3) {
          meter.style.backgroundColor = 'red';
          msg.innerHTML = '<strong>Weak</strong> Password (cracked in ' + pw.crack_time_display + ')';
        } else if (pw.score == 3) {
          meter.style.backgroundColor = 'yellow';
          msg.innerHTML = '<strong>Good</strong> Password (cracked in ' + pw.crack_time_display + ')';
        } else {
          meter.style.backgroundColor = 'green';
          msg.innerHTML = '<strong>Strong</strong> Password (cracked in ' + pw.crack_time_display + ')';
        }

			/* (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 = ' ';
			}
	});