made with love by grävy design co.
@gravydesignco // gravydesign.co
This is a simple, highly stylized JavaScript (ES6) app that generates a random string of characters based on the user's input selection -- Uppercase, Lowercase, Number, and/or Symbols. While most passwords request anywhere between 8-128, this app truly lowers the bar and sets the minimum to 4 because pin numbers. Responsive design techniques are used to create this beautiful masterpiece of modern form and function.
The user begins by selecting the amount of characters needed in their pin-number or password. Once all criteria are selected, the first function creates a string with one of each character required for the password is generated in order to guaranteed the final output will have a character from one of each of the user's selections.
The string (ranging from 1 to 4 characters) is subtracted from the total characters required for the password string and are then generated at random and are added to the previously created string. The final function takes the resulting string and gives it a nice shakeup with another randomized string shuffle function and displays the final password string into the input box faster than you can say "po-ta-toes".
Finally, I added in a button that will select and copy the password inside the input box because that's just what bosses do.
The CSS for this app is built to be responsive and use the best practices so you can see how it's done. Definitely look out for how outline handling is being done so that focus can still be tabbed through to press enter on the "Let's Go" button. You'll love and notice the lack of gross, unwanted scroll bars, and clever use of "vh" and "vw" throughout the stylesheet. I also created some classes that I use in several of my projects that do cool things like not let users highlight things they don't need to and stuff like that. Defaults have been prevented with the almighty (e) so the user doesn't accidentally press enter and feel like they entered a world of unasked for prompt hell (soon to be replaced -- see the "Future" section). I am proud of my organizational skills in HTML and CSS and I comment even when I don't need to because I'm a gangster. You're welcome, noobs. The authentic "An-American-Clearly-Made-This" Japanese style gives the SPG its finishing touches to truly earn the prefix of "Super" in the title.
Future development will get rid of those nasty alerts. Ew. Form boxes are on the way, just chill. I have a few interesting ideas that could possibly make some additional purposes that take advantage of the randomization functions added to this one app. I apologize for any future confusion though, this will forever be version 2.0 because I refuse to change the URL. And, let's be honest, the whole point of making version 1 was to have a version 2.0 anyway.
Also it's going to be likely pointless to point out any better way of doing this because you can basically just steal this code and do whatever you want, but of course go ahead and come with it on the bug fixes