Password Generator & Strength Checker In JavaScript – LOCK STEEL

Preview:

Description:

A secure password generator and visual password strength checker written in vanilla JavaScript.

More Features:

• Password visibility toggler.
• Custom password strength algorithm.
• Bar & Circle strength indicator.
• Repeated characters (like aaa, bbb) detection.
• Obvious sequences (like 123, 321) detection.

How to use it:

1. Load the Material Icons for the password visibility icons.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

2. Load the LOCK STEEL’s JavaScript and Stylesheet in the document.

<link rel="stylesheet" href="./css/lslstrength.css" />
<script src="./js/lslstrength.js"></script>

3. Create the HTML for the Password Generator & Strength Checker.

<div class="field">
  <input type="password" class="password" placeholder="Password">
  <div class="gen-pass">GENERATE</div>
  <div class="show-pass"><i class="material-icons">visibility</i></div>
</div>

4. Create a progress bar that will automatically update based on the strength score.

<div class="progress-bar">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

5. Create a progress circle that will automatically update based on the strength score.

<div class="percentage">
  <div class="digit">0</div>%
</div>