Home
S. Patel
Strong password generator

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 CSS v3. It is responsive.

Widget

Author S. Patel

8.4k

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

Music Player

Author:
Abhijit Sen

2 years ago

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

Author:
Prajwal Hallale

1 year ago

20.3k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

12.9k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

2 years ago

8.5k
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.

Author:
Prashant

2 years ago

13.7k
Interactive Kanban Board
Kanban board with draggable tasks

Author:
Quentin Rivers

3 months ago

502
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

6 months ago

1.2k
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Author:
Komal Jain

6 months ago

997
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

1 year ago

16.6k
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

8.8k
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

Author:
Ameth Galarcio

6 months ago

1.4k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components