index

Building a Secure Password Generator: A JavaScript Project

In today’s digital world, having strong, unique passwords is more important than ever. That’s why I built a password generator application that helps users create secure passwords with customizable options as a part of a Scrimba solo Project. In this post, I’ll walk you through the key features and implementation details of this project.

Features

The password generator comes with several user-friendly features:

Generate two random passwords simultaneously
Customize password length using a slider (1-20 characters)
Option to include numbers and symbols
One-click copy to clipboard functionality
Clean, modern user interface
Mobile responsiveness

Implementation

Let’s dive into the core implementation. The application is built using vanilla JavaScript, HTML, and CSS, making it lightweight and fast.

Character Set

The application uses a comprehensive character set that includes:

Uppercase letters (A-Z)
Lowercase letters (a-z)
Numbers (0-9)
Special symbols (~, !, @, #, etc.)

1
const characters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?","/"];

Password Generation Logic

The core password generation function handles different combinations of character sets based on user preferences:

1
function generatePwd() {
2
    let passwordOne = ''
3
    let passwordTwo = ''
4

5
    checkNumbers()
6
    checkSymbols()
7

8
    if (numbersChecked === false && symbolsChecked === false) {
9
        // Generate password with only letters
10
        // it takes only the first 53 entries of the array ( only letters )
11
        for (let i = 0; i < pwdLength; i++) {
12
            const indexOne = Math.floor(Math.random() * 52);
13
            const indexTwo = Math.floor(Math.random() * 52);
14
            passwordOne += characters[indexOne];
15
            passwordTwo += characters[indexTwo];
16
        }
17
    } else if (numbersChecked === true && symbolsChecked === false) {
18
        // Generate password with letters and numbers
19
        for (let i = 0; i < pwdLength; i++) {
20
            const indexOne = Math.floor(Math.random() * 62);
21
            const indexTwo = Math.floor(Math.random() * 62);
22
            passwordOne += characters[indexOne];
23
            passwordTwo += characters[indexTwo];
24
        }
25
    }
26
    // ... additional conditions for other combinations
27
}

User Interface

The HTML structure provides a clean and intuitive interface:

1
<div id="container">
2
    <div id="container-div">
3
        <h1>Generate a <br><span id="highlight">random Password</span></h1>
4
        <h2>Never use an insecure password again.</h2>
5
        <div class="button-check-ctn">
6
            <button onclick="generatePwd()">Generate passwords</button>
7
            <div class="checkbox-wrapper">
8
                <input type="checkbox" class="custom-checkbox" id="check-numbers">
9
                <label for="check-numbers">Numbers</label>
10
            </div>
11
            <div class="checkbox-wrapper">
12
                <input type="checkbox" class="custom-checkbox" id="check-symbols">
13
                <label for="check-symbols">Symbols</label>
14
            </div>
15
        </div>
16
        <!-- Password display and copy functionality -->
17
    </div>
18
</div>

Copy to Clipboard Functionality

The application includes a convenient copy-to-clipboard feature:

1
function copyPwdOne(passwordField) {
2
    const tempInput = document.createElement("input");
3
    tempInput.value = pwdFieldOne.textContent;
4
    document.body.appendChild(tempInput);
5
    tempInput.select();
6
    navigator.clipboard.writeText(tempInput.value).then(() => {
7
        alert("Password copied" + " " + tempInput.value);
8
    });
9
    document.body.removeChild(tempInput);
10
}

Security Considerations

While this password generator provides a good starting point for creating secure passwords, it’s important to note that:

The passwords are generated client-side, which means they’re not transmitted over the internet
The application uses JavaScript’s Math.random() for randomization, which is suitable for this use case
Users can customize the complexity of their passwords based on their needs

Conclusion

This password generator project demonstrates how to create a practical, user-friendly tool using vanilla JavaScript. The code is clean, modular, and easy to understand, making it a great learning resource for those interested in web development.

The application was created as part of a Scrimba solo project, showcasing how to build practical tools while learning web development fundamentals. You can find the complete source code on GitHub and try out the live version to generate your own secure passwords at pwd.elimer.de.

My Password Generator App