Strong password generator

With following options
Password length:
Include Uppercase Letters:
Include Numbers:
Include Symbols:

This tailwind example is contributed by S. Patel, on 24-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Widget

Author S. Patel

Tailwind v3.4 10.3k 10

Fork Fullscreen

<div class="flex flex-col items-center justify-center h-screen">
    <div class="mb-6">
        <label for="length" class="text-gray-700 font-bold">Password Length:</label>
        <input type="number" id="length" name="length"
            class="ml-2 border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            min="6" max="30" value="12">
    </div>
    <div class="mb-6">
        <label for="includeUppercase" class="text-gray-700 font-bold">Include Uppercase Letters:</label>
        <input type="checkbox" id="includeUppercase" name="includeUppercase" class="ml-2">
    </div>
    <div class="mb-6">
        <label for="includeNumbers" class="text-gray-700 font-bold">Include Numbers:</label>
        <input type="checkbox" id="includeNumbers" name="includeNumbers" class="ml-2">
    </div>
    <div class="mb-6">
        <label for="includeSymbols" class="text-gray-700 font-bold">Include Symbols:</label>
        <input type="checkbox" id="includeSymbols" name="includeSymbols" class="ml-2">
    </div>
    <button id="generateBtn"
        class="bg-cyan-500 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Generate
        Password</button>
    <div id="password" class="mt-6"></div>
</div>

var lowercaseLetters = 'abcdefghijklmnopqrstuvwxyz';
    var uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var numbers = '0123456789';
    var symbols = '!@#$%^&*()_+-={}[]|\\:;"<>,.?/~';

generateBtn.addEventListener('click', () => {
        var length = lengthInput.value;
        var includeUppercase = includeUppercaseInput.checked;
        var includeNumbers = includeNumbersInput.checked;
        var includeSymbols = includeSymbolsInput.checked;

let validChars = lowercaseLetters;
        if (includeUppercase) validChars += uppercaseLetters;
        if (includeNumbers) validChars += numbers;
        if (includeSymbols) validChars += symbols;

let password = '';
        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * validChars.length);
            password += validChars[randomIndex];
        }

passwordDisplay.innerText = password;
    });
</script>

Related Examples

Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Prajwal Hallale

3 years ago

22.2k
Music Player

Abhijit Sen

3 years ago

18.4k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.3k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Prashant

4 years ago

15.6k
Detect Screen Breakpoints with Tailwind CSS

Prajwal Hallale

4 years ago

8.6k
Windows

Maxim

8 months ago

623
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

dev-fab250

1 year ago

2.4k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

7 months ago

961
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Quentin Rivers

2 years ago

7.7k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Ameth Galarcio

2 years ago

3.3k
Number counter input

Prem..

3 years ago

16.8k
Interactive Kanban Board
Kanban board with draggable tasks

Quentin Rivers

2 years ago

3.1k