magician

This is a password generator.

Process

This project was a bit challenging, because I wasn’t sure where to start, but here is the thought process. I know that passwords are made up of different characters, including letters, numbers and symbols so I started there.

I created a character bank, by using a different variable to hold an array for every possibility of each type of character.

Rather than type out each individual letter, I generated an array of the alphabet using the String.fromCharCode() method.

Here's how:

I first generated an array of 26 beginning with 97 since lowercase a begins at 97, and then mapped through the method using this array to create an array of lowercase letters.

const charCodes = Array.from(Array(26)).map((_, i) => i + 97) const lowerCaseLetters = charCodes.map(code => String.fromCharCode(code))

Then I just mapped through the lowercase letters and applied the toUpperCase method to each one to create an array of uppercase letters.

const upperCaseLetters = lowerCaseLetters.map(letter => letter.toUpperCase())

Since the amount of numbers and special characters available are much more limited I just typed these out by hand.

const numbers = [1,2,3,4,5,6,7,8,9,0] const symbols = ["!", "@", "#", "$", "%", "^", "&", "*", "?"]

Next I defined a function that would take in an array and loop through its length based on a randomly generated index, and return the item at whatever random point it chose.

function getRandomChar(arr) { let index = Math.floor(Math.random() * arr.length) return arr[index] }

To allow the user to customize their password, I created an HTML form with multiple options that the user can select. Use lowercase - checkbox - boolean: true/false Use uppercase - checkbox - boolean: true/false Use numbers - checkbox - boolean: true/false Use symbols - checkbox - boolean: true/false Password length - range slider - number: (Min 5 -> Max 30)

Use lowercase is set to true by default, and the others are optional. Each checkbox corresponds to one of the arrays in the character bank.

The generatePassword function uses the user’s chosen length as the index for how many times to loop through generating each random character, by calling the getRandomChar function on each array.

NOTE: Because the password is generated by looping through each array in the order that I have written them, the pattern of the characters in the password will always be the same.

For example, if all options are selected the pattern will be:

[lowercase][uppercase][number][symbol]…[lowercase][uppercase][number][symbol]… etc.

The generate button will call the generatePassword function each time it is pressed, generating a new password each time.

The strength indicator helps to inform the user of how strong their password is.

• A password the uses only one option is weak
• A password that uses two options is medium
• A password that uses three options is strong
• A password that uses all four options is very strong

Further development

• It might be a good idea to introduce more variability to the passwords that are generated, rather than following the same pattern each time. Although, given the number of options and length I don’t believe it is a security concern in its current format.
• A progressively interesting animation or sound that runs when the user chooses a strong or very strong password might motivate the user to choose a stronger password through gamification techniques

Built with

• Semantic HTML5 markup
• CSS3
• Flexbox
• Google fonts
• JavaScript

Useful resources

Styling Checkbox Input MDN Modern CSS

Making lowercase checkbox checked by default and disabling the ability to uncheck the box Varunver

Styling Range Input Smashing Magazine

Scrolling Marquee Text Effect Ryan Mulligan

Author

• Website - Alekzandriia
• Twitter - @alekzandriia