The world is online now and everyone has a login somewhere. You have to create an account somewhere with a strong password to prevent hack.
Many users are in the habit of using easy passwords such as their year of birth or middle name. This is not ideal as a little guess can expose your account. There is the need to use stronger password with combination of numbers, alphabets, and symbols.
See the Pen RwWeNOx by zoneboy (@zoneboy) on CodePen.
In this tutorial, you will learn how to create a random password generator with JavaScript, HTML, and CSS. The random password generator will allow you to create unique passwords based on the selected length and key values checked.
HTML
This is the first thing you need to create. We will create the HTML framework of the random password generator.
We added an h1 heading that tells users what the application is about.
The next thing is creating a wrapper div that covers all the other divs.
Our password generator will have a
- text field to display the generated password, – <input type=”text” readonly><span id=”copy”><i class=”far fa-copy”>Copy</i></span><br><br>. The field is set to readonly to disable editing.
a number input type to select the
- password length, – <label>Length: <input type=”number” name=”length” min=”0″></label>
- checkboxes for symbols, – <label>Symbols <input type=”checkbox” name=”symbol”><i class=”mark”></i></label>
- numbers, – <label>Numbers <input type=”checkbox” name=”number”><i class=”mark”></i></label><br>
- lowercase, – <label>Lowercase <input type=”checkbox” name=”lowercase”><i class=”mark”></i></label>
- and uppercase alphabets. – <label>Uppercase <input type=”checkbox” name=”uppercase”><i class=”mark”></i></label>
It will have a button to generate the password too.
You can see how it is rendered in the browser. It is not looking good at the moment. Let’s add some CSS to beautify it.
CSS
We need to set the font family and also a background color for our random password generator app. Then we centralized the heading with text-align:center; and also gave it a white colour.
The next thing is working on the wrapper that covers the other divs.
The wrapper div should be in the center and we need to modify it so that it will look different from the background color of the app. We gave it a background color of teal with a border radius and also modified the border to have a white color. Centralizing the wrapper div was made possible with the text-align:center; and the 50% width. Then we added margin to move it away from the top to the middle of the page.
Other CSS properties were specified for the input types, the generate password button, and the checkboxes. This is to make the application cooler to the end-user. You can see the result of this in the browser.
If you click the Generate Password button, you will realise nothing happens. This is because we have not added functionality to the application. We do that with JavaScript.
JavaScript
This is the main engine of the application and I am excited to show you the JavaScript code.
The first thing in the JavaScript is to set our variables. We need to assign variables to the html elements. We used document.querySelector() to select our html element. This returns the first Element in the html document.
The document.getElementById() selects the html element with the selected id of copy.
Our variables are set and we need to start telling them what to do next.
The next thing is creating an object named passKeys. This passKeys object will have a name:value pairs. The name will be our password type, while the corresponding value will be the possible options that exists for that name. lowercase: ‘abcdefghijklmnopqrstuvwxyz’ shows the alphabets in lowercase and vice versa.
The next thing is to create the function that generates the password. I know you are happy to see that.
We created declared 2 variables using the let keyword within the generatePassword function. The let keyword allows us to limit these variables to the scope of the function. The two variables declared called main and finalPassword are assigned an empty string.
The next thing is creating an object called passOptions. The value passed in will then be used as parameters for the generatePassword function generatePassword(lower, upper, num, sym, length).
The for loop is the next thing. for(i=0;i<Object.keys(passOptions).length;i++)
It says that take i as 0, now if i is less than the passOptions length, i should increment. The Object.keys returns an array of the passOptions objects name (lowercase, uppercase, number, symbol). Once the loop is in action, we need to tell it what to do. We now use the assignment operator += to assign Object.values(passOptions)[i]) ? passKeys[Object.keys(passOptions)[i]] : “” to the main variable.
The Object.values(passOptions)[i]) ? passKeys[Object.keys(passOptions)[i]] : “” is a ternary operator meaning if condition is true do this and if it’s false, do this.
The Object.values(passOptions) means the object values (lower, upper, num, sym) and this is the condition. If it is true, the passKeys[Object.keys(passOptions)[i] runs. Remember that Object.keys(passOptions)[i] returns the passOptions objects name (lowercase, uppercase, number, symbol), so we are just saying passKeys[lowercase], passKeys[uppercase] indirectly. This will return the password options. Then if the condition is false, we return an empty string.
The next thing is the if statement and it looks at what if main is not equal to an empty string and if the password length is greater than zero, what should happen.
We use the forloop again for(i=0;i<length;i++){finalPassword += main[Math.floor(Math.random() * main.length)];
We set i to zero and if i is less than the input length, i should increment. Then as this loops is being iterated, the finalPassword should now be assigned main[Math.floor(Math.random() * main.length)];.
The user will also be shown an error “Select any password option and specify the length” if no length or option is selected.
That’s the core of the JavaScript code and we are good to go.
Your code should be working perfectly now and generating random passwords. You can check codepen for the code.
Let me know if you have any addition or subtraction.
