How to make use of it:

1. Load the most recent jQuery, Bootstrap 5 framework, and Font Awesome iconic font within the doc.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Fotn Awesome -->
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />
<!-- Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Create an input subject to hold the generated password strings.

<input type="text" id="result" readonly />

3. Create a button to repeat the password to the clipboard.

<button id="clipboard">Copy</button>

4. Create a spread slider part that lets you specify the character size.

<input type="range" id="length" min="1" max="20" step="1" />
<span id="rangeText"></span>

5. Create a set of checkboxes that permit you to decide which sorts of characters must be included within the password.

<input type="checkbox" id="uppercase" checked />
<label for="uppercase">Include uppercase letters</label>
<input type="checkbox" id="lowercase" />
<label for="lowercase">Include lowercase letters</label>
<input type="checkbox" id="numbers" />
<label for="numbers">Include numbers</label>
<input type="checkbox" id="symbols" />
<label for="symbolse">Include symbols</label>

6. Create a set of checkboxes that permit you to decide which sorts of characters must be included within the password.

<input type="checkbox" id="uppercase" checked />
<label for="uppercase">Include uppercase letters</label>
<input type="checkbox" id="lowercase" />
<label for="lowercase">Include lowercase letters</label>
<input type="checkbox" id="numbers" />
<label for="numbers">Include numbers</label>
<input type="checkbox" id="symbols" />
<label for="symbolse">Include symbols</label>

See Also –

🔐 Password Strength Meter Based On zxcvbn In Vue.js
Show Password As Text Toggle for Bootstrap Forms Plugin
Generate a Secure Password Generator Plugin | Diceware

See Demo And Download