A JavaScript Plugin To Rate Your Password Strength – passwordMeter.js

Preview:

Description:

A super tiny Vanilla JS based password strength meter plugin which displays a plain text feedback indicating the current password strength when typing.

How to use it:

Create a ‘rating’ element next to your password field to display the current password strength.

<div class="rating"></div>

Put the JavaScript file ‘passwordMeter.js’ into the webpage when needed.

<script src="passwordMeter.js"></script>

Style the password rating element:

.rating {
  font-weight: bold;
  border-radius: 3px;
  color: white;
  display: inline-block;
  padding: 5px;
  text-transform: uppercase;
}

Apply different CSS styles to the rating element depending on the current password strength:

.weakPassword { background-color: #EF1111; }

.moderatePassword { background-color: #FFC700; }

.strongPassword { background-color: #22BA3E; }