Password Generator & Strength Checker In JavaScript – LOCK STEEL

Category: Form , Javascript | June 2, 2021
Author:Labi-Lawal
Views Total:91 views
Official Page:Go to website
Last Update:June 2, 2021
License:MIT

Preview:

Password Generator & Strength Checker In JavaScript – LOCK STEEL

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>

You Might Be Interested In:


Leave a Reply