Create a Password Generator using HTML CSS and jQuery

Last Updated : 24 Apr, 2025

In this article, we will create a password generator using jQuery. With this tool, users can easily customize their password by specifying the desired length and selecting options like including symbols, numbers, lowercase, and uppercase letters. Furthermore, the generated password can be conveniently copied to the clipboard for immediate use.

Create-Password-Generator-Using-HTML-&-jQuery

Approach

We start by setting up the HTML structure and implementing CSS styles. This approach grants our generator a clean and visually appealing design.
The inclusion of the jQuery library facilitates seamless manipulation of the Document Object Model (DOM) and streamlines user interactions.
The generatePassword function serves as a fundamental component within the application. It carefully considers the user's preferences, taking into account factors such as password length and options for different character types. It generates a random password based on the selected character types and length. The generated password is stored in the password variable.
The function known as copyToClipboard provides users with the ability to easily duplicate the generated password into their clipboard.

Example: Below is the implementation of the project.

JavaScript

$(document).ready(function () {
    let password = '';

    function generatePassword() {
        const passwordLength =
            parseInt($('#passwordLength').val());
        const useSymbols =
            $('#useSymbols').is(':checked');
        const useNumbers =
            $('#useNumbers').is(':checked');
        const useLowerCase =
            $('#useLowerCase').is(':checked');
        const useUpperCase =
            $('#useUpperCase').is(':checked');

        let charset = '';
        let newPassword = '';

        if (useSymbols) charset += "!@#$%^&*()";
        if (useNumbers) charset += "0123456789";
        if (useLowerCase) charset += "abcdefghijklmnopqrstuvwxyz";
        if (useUpperCase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        for (let i = 0; i < passwordLength; i++) {
            newPassword += charset.charAt(
                Math.floor(Math.random() * charset.length));
        }

        password = newPassword;
    }

    function copyToClipboard() {
        const el = document.createElement('textarea');
        el.value = password;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        $('#successMessage').text('Password copied to clipboard!');
        setTimeout(function () {
            $('#successMessage').text('');
        }, 2000);
    }

    $('#generatePassword').click(function () {
        generatePassword();
        $('#generatedPassword').val(password);
        $('#generatedPasswordContainer').show();
    });

    $('#copyToClipboard').click(function () {
        copyToClipboard();
    });
});

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0">
    <title>Password Generator - Jquery</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="container" class="container">
        <h1 class="title">Geeksforgeeks</h1>
        <h3 class="subtitle">Random Password Generator</h3>
        <div id="inputContainer" class="input-container">
            <label class="label">Password Length:</label>
            <input type="number" min="8" max="32" value="12"
                 class="input" id="passwordLength" />
        </div>
        <div id="checkboxContainer" class="checkbox-container">
            <label><input type="checkbox" id="useSymbols" checked />
                Symbols
            </label>
            <label><input type="checkbox" id="useNumbers" checked />
                Numbers
            </label>
            <label><input type="checkbox" id="useLowerCase" checked />
                LowerCase
            </label>
            <label><input type="checkbox" id="useUpperCase" checked />
                UpperCase
            </label>
        </div>
        <button class="generate-button" id="generatePassword">
            Generate Password
        </button>
        <div id="generatedPasswordContainer" 
            class="generated-password-container">
            <div class="input-container">
                <label class="label">Generated Password:</label>
                <input type="text" id="generatedPassword" readonly 
                    class="input" />
                <button class="copy-button" id="copyToClipboard">
                    Copy
                </button>
            </div>
        </div>
        <p id="successMessage" class="success-message"></p>
    </div>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js">
    </script>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    background: #eee;
}

.container {
    max-width: 400px;
    margin: 1rem auto;
    padding: 60px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
    background-color: white;
    text-align: center;
}

.title {
    color: #008000;
    font-size: 24px;
}

.subtitle {
    font-size: 18px;
    margin-top: 10px;
}

.input-container {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.label {
    flex: 1;
}

.input {
    padding: 15px;
    border: 3px solid #ccc;
    border-radius: 10px;
    width: 150px;
    font-size: 16px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.checkbox-container label {
    margin-right: 10px;
    font-size: 14px;
}

.generate-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    font-size: 16px;
    margin-top: 10px;
}

.generate-button:hover {
    background-color: #0056b3;
}

.generated-password-container {
    display: none;
    margin-top: 20px;
}

.copy-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    font-size: 16px;
    margin-left: 10px;
}

.copy-button:hover {
    background-color: #0056b3;
}

.success-message {
    color: #008000;
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
}