Github Repository Page: https://github.com/palowenstein/lebowski-js-password-generator
Github Deployment Page: https://palowenstein.github.io/lebowski-js-password-generator/
- 5 types of password elements available to the user via a button / prompt window combination:
- Uppercases
- Lowercases
- Numbers
- Symbols
- Special Characters
- For choices #1-#4, a certain type of quote from 'The Big Lebowski' will appear on screen:
- If you respond yes to any of the first 4: you get a positive quote from The Big Lebowski.
- If you respond no to any of the first 4: you get a negative quote from The Big Lebowski.
- The fifth button, length, gets a positive quote if the value entered is between 8 and 128. If outside of that range, you're being very undude.
- Once your selection is complete, click on the red button to 'degenerate' a password.
- Head Section: 1) CSS Reset, 2) CSS Bootstrap, 3) Trilogy CSS.
- Head Section: The javascript src is specified as DEFER so it doesn't load until the whole page is loaded.
- Body Section: I used bootstrap to embelish the presentation and, more importantly, I inspired myself from the movie THE BIG LEBOWSKI for this homework.
- Body Section: Notice the multiple rows within the container, how the buttons are placed, etc. There's a minimum (6 instances) of custom css.
- Based on the 5 buttons, there are 5 variables: 1) upper 2) lower 3) numbers 4) symbols 5) length.
- There is a stringToBoolean function to convert the first four strings into true/false statements with a bonus string to lowercase conversion to avoid the need for uppercase characters.
- In addition of yes, y, yeah, you can also type yeah lebowski, team america, south park, beavis, oui, ja [const array within the StringToBoolean function).
- Anything else will trigger a false statement.
- Obviously, the fifth variable (length) is a number from the get so not need for any conversion.
- The if/else statements are quite obvious: true/false sends you the quote (responseUpper, responseLower, etc.) and the true/false statement is stored in each variable.
- Depending on the amount of true/false statements, the script will triggers four functions.
- Those four functions are: hazardousUpper, hazardousLower, hazardousNumbers, hazardousSymbols.
- Each function is calculated based on (in logical order):
- a math.random function which triggers a selection of characters itself extracted from the standard roman character set
through the use of hexacodes.
- For Upper/Lower, it's 26 chars (alphabet) available from, respectively, hexacodes 65/97.
- For the numbers, it's 10 chars (0-9) available from hexacode 48.
- For the symbols, it's 15 chars available from hexacode 33.
- Because the Math.Random function finds a decimal number between (ex:Upper/Lower) 1.xxx and 26.xxx,
we use a math.floor function to:
a) sanitize it to a non floating point number between 1 and 26,
b) add the necessary integer to place those numbers in the correct hexacodal geography (+65, +97, +48, +33 - see section #1 above). - Finally, the String.fromCharCode extracts the necessary strings (characters) from each operation.
- his value is inherited by each hazardous function
- The function finalPassword generates the final password.
- The if in the "var all +=" associates the surviving values (if not all of them) and passes them on to...
- The loop contained in "var password" which uses math.floor and math.random to generate the char selections + the .length circonsizes them based on the previous user input.
- the following substring validates the final selection which is passed via a return password to the write password function below.
- a math.random function which triggers a selection of characters itself extracted from the standard roman character set
through the use of hexacodes.
- Vanilla Javascript [http://www.ecmascript.org/]
- Bootstrap CSS Library [https://getbootstrap.com/]
MIT License | Copyright © [2020] Pierre André Lowenstein