Assignment 5 of the Front-End Web Dev bootcamp to create a password generation web app.
This is a mini application built in JavaScript that can generate a random password in accordance with set requirements.
Password Generator · GitHub repo ·Table of Contents
The goal of this project is practice intermediate JavaScript skills (especially functions) by building a web app that can generate a random password that meets specifications provided by the user.
The task for this challenges outlined the following requirements:
The application must:
- Generate a password when the button is clicked.
- Present a series of prompts for password criteria:
- Length of password: At least 8 characters but no more than 128.
- Character types:
- Lowercase
- Uppercase
- Numeric
- Special characters ($@%&*, etc.)
- Code should validate for each input and at least one character type should be selected.
- Once all prompts are answered, the password should be generated and displayed in an alert or written to the page.
We were provided with the original image of the web app:
We were provided with files already built in:
Basic data was provided (such as arrays of character types). I wrote the code in:
I had 2 iterations of the code for the assignment. First, I created an app where all character types were joined in a mega-array and a password was randomly generated from it. When testing this solution, I realized that this approach did not guarantee that at least one character from each selected character set would be included in the generated password.
So I changed my approach. This video was very helpful in directing my thinking. I also used parts of the code mentioned in that video in my solution.
- Namely, I used the code shown on 14:05 in my functions
addChar(). - I also referred to the code shown on 16:22 in my function
finishPassword(). - I used the method shown starting on 16:53 to connect my JavaScript to HTML to make the button interactive and to print out the generated password into the textbox (rather than displaying it on the console or via an alert).
However, as the assignment specifications were quite different from this video, my solution diverged significantly. I had to ask the user for input (i.e., which character sets to use) and therefore, had to 1) validate the input; 2) loop if no valid input is provided.
I also did not like that all character sets, when joined together in a mega-array, still had a predictable structure. So I used the code snippet 446 from StackOverflow to create a function that would randomize the mega-array before the application picks additional characters from it to reach the specified password length.
The next problem I encountered was that while the generated password had the specified length, and its second part was generated from a randomized array, the first part still followed a predictable structure. So, I created one more function using code snippet 64 to re-shuffle the password string 10 times to ensure that the password order could not be guessed.
I broke each set of actions into a function, trying to balance modular approach and the DRY principle. Then I united 4 functions in a single function createPassword() and connected it to the html button element.
The modular approach allows for easier testing and debugging during development and also helps anyone else to see the logic flow.
The project is now live.
The deployed page looks like this:
You can find the password generator app and its corresponding code here:
Attribution
- Fingerprint icon from Freepixel.