I was given html and css without any functionality. I was to provide the solution for creating a password generator. There was also some javascript that was provided. When the generate button was clicked, my job was to then prompt the user what kind of characters they wanted for their password (uppercase, lowercase, numeric, and symbols) and what the length of the password should be (between 8-128). Character specification is done through checkboxes and character length is done through a textbox that also has values listed. The application ensures that the user check at least one check box. It also checks to see that the user either has picked/typed a character length and that it is one that falls between 8-128. This is all done through a div that appears when the generate button is clicked.
-
Clicked the generate button
-
The Div, that is responsible for having the user enter their criteria, has appeared.
-
Proof of validation.
- Did not select any boxes or enter a length - result: text appears at the bottom stating no boxes where checked
- Checked a box but did not select/type a length - result: text appears at the bottomm stating there was a problem with the character lenght
- Checked a box but selected/typed a length under 8 - result: text appears at the bottomm stating the same issue as before, since there was no reason for it to change.
-
Criteria is entered correctly and the numeric checkbox was entered. The criteria div has gone away and we are presented with a randomly generated password.
-
Generate password is pressed again and so again the criteria div appears again. The uppercase and lowercase checkboxes are then selected (in addition to the already checked numeric checkbox). The done button is pressed and another password is generated, but this time with the added criteria of characters.
-
Once again the generated password button is clicked. The criteria div is once again presented. The reset button is clicked in order to demonstrate that it clears all input/activity on the form.
-
Not demonstrated - The criteria div has an X button, that closes the div at anytime.