Open In App

Create a Password Generator using HTML CSS and jQuery

Last Updated : 01 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 uppe­rcase letters. Furthermore, the gene­rated password can be convenie­ntly 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 ge­nerator a clean and visually appealing design.
  • The inclusion of the jQue­ry library facilitates seamless manipulation of the­ Document Object Model (DOM) and stre­amlines user interactions.
  • The ge­neratePassword function serve­s as a fundamental component within the application. It care­fully considers the user’s pre­ferences, taking into account factors such as password le­ngth and options for different character type­s. 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 provide­s users with the ability to easily duplicate­ the generate­d 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=
    </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;
}


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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads