Build a Password Generator Application in HTML and JavaScript(with Code Example)

Introduction

In today's digital age, securing online accounts with strong passwords is essential. But how do we ensure that passwords are both complex and unique every time? In this guide, we'll walk you through creating a Password Generator tool which allows users to customize their password characteristics (length, case, numbers, and special characters).

The Importance of Strong Passwords

Before we dive into the mechanics of generating passwords, let’s first understand why this is so important. The ever-increasing number of cyber threats necessitates a password policy that balances convenience and security. Simple passwords (like "12345" or "password") are easy to guess or crack, but strong passwords combine multiple character sets in random patterns, making them nearly impossible to break with brute force methods.

HTML Structure: Laying the Groundwork

The first part of our code deals with setting up the HTML structure. This includes creating input fields, checkboxes, and a button for the user to interact with.

<div class="container">
    <h1>Password Generator</h1>

    <label for="length">Password Length:</label>
    <input type="number" id="length" min="4" max="20" value="0">

    <label for="uppercase">Include Uppercase Letters</label>
    <input type="checkbox" id="uppercase">

    <label for="lowercase">Include Lowercase Letters</label>
    <input type="checkbox" id="lowercase">

    <label for="numbers">Include Numbers</label>
    <input type="checkbox" id="numbers">

    <label for="special">Include Special Characters</label>
    <input type="checkbox" id="special">

    <button onclick="generatePassword()">Generate Password</button>
    <div id="password"></div>
</div>

CSS Styling: Enhancing User Experience

Here, the CSS styling focuses on creating a clean and engaging design. The center-aligned container, background gradient, and shadow effects give the app a professional look.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(to right, #4ee8cc, #0d4f5e);
}

.container {
    background-color: rgb(236, 246, 235);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(231, 220, 220, 0.1);
    width: 300px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

label {
    display: block;
    margin: 10px 0 5px;
}

input[type="number"],
input[type="checkbox"] {
    margin-bottom: 10px;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

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

#password {
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

JavaScript Magic: Generating the Password

The JavaScript function is where the magic happens. Here, the logic processes the user inputs (whether they want uppercase letters, numbers, or special characters) and then assembles the password based on these choices.

<script>
    function generatePassword() {
        const length = parseInt(document.getElementById('length').value);
        const includeUppercase = document.getElementById('uppercase').checked;
        const includeLowercase = document.getElementById('lowercase').checked;
        const includeNumbers = document.getElementById('numbers').checked;
        const includeSpecial = document.getElementById('special').checked;

        if (isNaN(length) || length < 5 || length > 20) {
            document.getElementById('password').innerText = 
                'Password length must be between 5 and 20 characters!';
            return;
        }

        const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
        const numberChars = '0123456789';
        const specialChars = '!@#$%^&*()-_=+[]{}|;:,.<>?';

        let availableChars = '';
        let mandatoryChars = '';

        // Ensure at least one character set is selected and add mandatory characters
        if (includeUppercase) {
            availableChars += uppercaseChars;
            mandatoryChars += uppercaseChars[Math.floor(Math.random() * uppercaseChars.length)];
        }
        if (includeLowercase) {
            availableChars += lowercaseChars;
            mandatoryChars += lowercaseChars[Math.floor(Math.random() * lowercaseChars.length)];
        }
        if (includeNumbers) {
            availableChars += numberChars;
            mandatoryChars += numberChars[Math.floor(Math.random() * numberChars.length)];
        }
        if (includeSpecial) {
            availableChars += specialChars;
            mandatoryChars += specialChars[Math.floor(Math.random() * specialChars.length)];
        }

        if (availableChars === '') {
            document.getElementById('password').innerText = 
                'Please select at least one character set!';
            return;
        }

        // Ensure mandatory characters include a number if selected
        if (includeNumbers && !mandatoryChars.split('').some(c => numberChars.includes(c))) {
            mandatoryChars += numberChars[Math.floor(Math.random() * numberChars.length)];
        }

        // Generate remaining characters randomly from available sets
        let password = mandatoryChars;

        for (let i = mandatoryChars.length; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * availableChars.length);
            password += availableChars.charAt(randomIndex);
        }

        password = shuffleString(password);
        document.getElementById('password').innerText = password;
    }

    function shuffleString(string) {
        const array = string.split('');
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]]; // Swap positions
        }
        return array.join('');
    }
</script>

Code Explanation

1. Retrieving User Preferences

The function generatePassword() is triggered when the user clicks the button to generate a password. The first thing it does is collect the user's input values.

• Password Length: The length of the password is taken from an input field (with id 'length'). It uses parseInt() to convert the input into an integer.
• Character Types: The script checks whether the user has selected any of the following options using .checked.
  • Uppercase letters (from a checkbox with id 'uppercase').
  • Lowercase letters (from a checkbox with id 'lowercase').
  • Numbers (from a checkbox with id 'numbers').
  • Special characters (from a checkbox with id 'special').

2. Validating the Password Length

The code checks if the entered length is a valid number.

If the length is not a number, or less than five or greater than 20, it shows an error message and stops the process.

3. Defining Character Sets

Next, the code sets up the possible characters to be used in the password.

• Uppercase letters: A string containing 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
• Lowercase letters: A string containing 'abcdefghijklmnopqrstuvwxyz'
• Numbers: A string containing '0123456789'
• Special characters: A string containing characters like !@#$%^&*()-_=+[]{}|;:,.<>?

4. Preparing for Password Generation

The code initializes two variables.

availableChars will store all the character sets the user selected (like uppercase, lowercase, etc.).

mandatoryChars will store at least one random character from each selected character set to ensure that the password meets the user's criteria (e.g., it contains an uppercase letter if selected).

5. Adding Selected Character Sets

For each character set the user has selected.

• It adds the corresponding characters to availableChars.
• It also adds one random character from that set to mandatoryChars. This ensures that the password will contain at least one character from each chosen category.

6. Checking for Character Set Selection

If the user hasn't selected any character sets (e.g., no uppercase, lowercase, numbers, or special characters), the function will show an error message and stop.

7. Ensuring a Number is Included (if Selected)

If the user has selected numbers but doesn't yet have any numbers in mandatoryChars, it ensures at least one number is added.

8. Generating the Random Password

• After the mandatory characters (those chosen by the user) are added, the code generates the remaining characters by randomly picking characters from the availableChars pool.
• The remaining characters are added to the password until it reaches the desired length.

9. Shuffling the Password

The shuffleString() function is then used to randomize the order of the characters in the password. This ensures that the password is not predictable or structured in a particular way.

10. Displaying the Generated Password

Finally, the generated password is displayed on the webpage by updating the inner text of the element with the ID password.

Output

The output displays the generated password based on user-selected criteria.

Conclusion

Creating a secure and customizable password generator is essential for enhancing online security. By allowing users to define parameters like password length, character types, and inclusion of numbers or special characters, this tool ensures the generation of strong, unpredictable passwords. Through a combination of HTML for structure, CSS for design, and JavaScript for functionality, users can easily create passwords that are both complex and tailored to their needs. This approach not only simplifies the process but also boosts cybersecurity by promoting the use of robust passwords.