Table of contents
This project is about how to build a random password generator.
What is required is to have a password generator that generates a password containing upperCase letters only, or a password containing lower case letters only, or a password containing numbers only, or a password containing symbols only like below depending on what checkbox is clicked.
At the end we will also see how to generate a mixed password that contains uppercase letters and symbols, or numbers and lowerCase letters and so on...
Also, we want to be able to copy this password to paste it somewhere else, so we have to build this little copy/paste symbol below:
1) Step 1: HTML & CSS part
First we will create a <div></div> that will contain all of our elements.
And we will give the <div></div> a class name of "main-container".
If we refresh the HTML page we will not see anything. That is because we did not give the <div></div> a width and a height and a background-color value.
Let's go to the index.css file and set these properties for the <div></div>.
So in index.html we'll have the code:
And in index.css file we'll have the code:
So in the browser we'll have:
Nothing fancy so far, so let's add our elements to this <div></div>.
Now we'll add a <h1></h1> with text "Password Generator".
And we'll add another <div></div> with class name "password". It is in this <div></div> that the password generated will be displayed.
Also inside this <div></div> we'll add an emoji of the copy/paste symbol, this way when clicked the password will be copied.
So the HTML code will be:
To add an emoji in HTML all you have to do is to look for the Unicode of the emoji you want to add (You can check the following link: unicode.org/emoji/charts/full-emoji-list.html) , Copy the code in the code column, remove the "U+" and replace it with "&#x" or "&#" in the index.html file.
So in the browser we have:
If you have noticed, the <div></div> with the class name "password" does not appear on the screen. Actually, it is there, but we can't see it because we did not give it a height and a width and a background-color.
Also, we want the copy/paste emoji to be at the right bottom of the <div></div>.
So let's add some CSS to the elements:
So here we added a width of 80% and a height of 50px to the <div></div> with class name of "password", and a background-color of white so that we can see it.
Also as we want to center this <div></div> in the middle of the main-container <div></div> we used the CSS property margin and gave it a value of 0 auto.
And finally to add a border to the <div></div> with class name of "password" we used border CSS property with an outset value as type of the border.
To position the emoji we set the position of the <span></span> element to relative position so that we can apply the CSS properties left and top and move the element easily.
We want the emoji to be at the end of the <div></div> so the left property is set to 87%, and for the emoji to be at the bottom of the <div></div> the top property is set to 30%.
Also we want the emoji to be a little bit bigger to be visible so we use the font-size property, because remember, an emoji is a text, and to change the size of a text in HTML we use the font-size property.
We can change the color of the emoji by adding the color property. So here the color is black.
For the <div></div> with class name of "main-container" we added also a border-radius value of 20px to make the borders of the <div></div> rounded and a white color so that all the text written inside the <div></div> is white.
So on the browser we'll have:
Now it is time to add the rest of the elements.
So, for the text and the checkbox all we have to do is to add a paragraph, and inside of this paragraph add the text we want and a checkbox.
We'll also add a horizontal line to separate each paragraph using the <hr> tag.
At the end we'll add a button to generate the password.
So the code is:
Here we added the checkbox using <input/> tag and giving it the type value of checkbox.
So this is it for the HTML part.
On the browser this will look like:
Now we want the checkbox of each paragraph to be positioned at the end of the the <div></div>. And we want all the checkboxes to be aligned vertically.
To do that we'll use the display property in CSS and we'll give it a value of flex to make all the elements of the paragraph in one row that we call the main row.
After that we'll add justify-content property and give it the value of space-between. It is this property that will add space between the text inside the paragraph and the checkbox and make them aligned vertically. Because this property makes the items evenly distributed in a row.
We'll add align-items property and give it a value of center.
We'll add also a font-size property because we want the text to look a little bit bigger and a padding property to add some space inside the paragraphs.
For the <hr> tag we'll give it a width of 90% as we don't want it to occupy all the width of the <div></div>.
And finally for the button we'll add:
a display property and give it a value of block so that we can center the button
A padding property to make some space inside the button.
A margin property to make some space between the button and the last paragraph.
A border-radius to make the corners of the button rounded.
A color to change the color of button text.
A font-size to make the button text larger.
A background-color to add a color tp the button background.
Also, we want the background-color of the button and the color of the button text to change once the user hovers over the button.
So the code will be:
So on the browser we have:
And when we hover over the button the color of the button changes and becomes:
Now one last thing before we finish, it would be better if the password generator was centered in the middle of the browser.
To do that we will apply the display property to the body and give it a value of flex, and then give it a height.
If we want the Password generator to be centered vertically we have to give the body a height value, because the password generator or the <div></div> with a class name of "main-container" has already a height of 500px. but 500px of what? the <div></div> needs a reference to position itself to. So it will be 500px of the body. But the body does not have any height for the moment, that's why we need to set a height for the body.
We'll add justify-content and give it a value of center.
And align-items property with a value of center.
So the code is:
Final step is to go back to the <div></div> with the class name of "main-container" and change the style of the mouse cursor into a pointer and make the caret disappear.
So the CSS code is:
The final results looks like this on the browser:
2) Step 2: Javascript Part
Now that we're finished with the HTML and CSS part, let's go to JavaScript.
First, let's select all the inputs, the button and the <div></div> where the password will show using document.querySelector syntax().
And let's say that we want to generate a password that is 15 characters long.
So the code is:
As we want to generate a password made of upperCase letters only, or numbers only, or symbols only, we will declare 3 different variables, one for the upperCase letters where we will store letters, one for numbers and one for symbols.
So the code becomes:
Now we want to generate a password at the click of the button. So when the button is clicked, we want a function to be executed, which is generating the password.
So to make the button listen to the click event the code will be:
Now we want at the click of the button, to generate a password. But the length of this password should be only 15 characters.
So to do that we'll add a for loop that will execute 15 times before generating the password.
so the code will be:
Now we will add conditions. We will say, if the upperCase checkbox is checked then I want you to generate a password 15 characters long made of upperCase letters only.
To do that we'll add the following code:
So here we said if the upperCase checkbox is checked, generate a random 15 characters long password, and put it in the password <div></div> container.
To choose random letters we used Math.random() syntax. Math.random() returns a number between 0 and 1. But the number is a floating number. We want an integer, not a floating number. so we introduced Math.floor(), because Math.floor() rounds the number down to the nearest integer.
We used also number 26, because Math.floor(Math.random()*26) will return a number from 0 to 25, which is exactly the number of upperCase array indexes. upperCase array contains 26 letters and their index number starts from 0 and goes up to 25.
passwordContainer.style.color="black" is here to make the password appear in a black color, because in CSS when we set the color for all the text inside the <div></div> main container, we set the color to white.
So now after checking the box and clicking on the button we have:
But now, if we try to click the button again we'll have:
We have now 2 passwords in the same place and shifted to the bottom. Why? Because simply we did not clear the <div></div> that has class name of "password" first before trying to display another password in it.
To display another password in the same <div></div> we have to clear it first, and then we can display something.
To clear the <div></div> we'll create a function:
passwordContainer.replaceChildren() will empty the <div></div> from all nodes, once it is done we want the <div></div> to have the copy/paste emoji on it. Hence passwordContainer.innerHTML() syntax.
So once we have our function we will place it now in the button click event function like this:
Which means, whenever I click on the button, the <div></div> will be cleared first and then the password will be displayed. If you try now to click on the button as many times as you want you'll see that you have only one password that is displayed each time you click.
After that we will just repeat the same code with else if statement and change the name of the arrays and checkboxes.
So now, whenever we check a checkbox we have a password generated:
To do that we can add another line of code with else if statement saying, if the uppercase and symbols checkboxes are both checked, generate a mixed password:
However, if you try now and check both checkboxes you will not have a mixed password, you will still have only a password with the upperCase letters generated. Why? Because the if statement verifies a condition starting from the beginning, and once it meets the condition it executes the code of this condition.
Here we put a condition on both the symbol checkbox and the upperCase checkbox, but this condition is at the end of the code, so when we will check the checkboxes, the if statement will see if there is any condition about the upperCase checkbox, if she finds it, she will execute the code, if not, she will go to the next condition.
So once we check both checkboxes and click on the button the verification will start, and the first condition is about the upperCase checkbox. So when the if statement will find this condition she will stop there, because indeed, the upperCase checkbox ix checked.
To solve this problem, we'll add the condition about symbol checkbox inside the if statement of the upperCase checkbox.
So the code becomes:
This way when the if statement will come across the upperCase checkbox she will verify first if the symbol checkbox is checked or not, if yes then it will generate a mixed password, and if not then it will generate a password with only upperCase letters.
As we want a mixed password, we concatenated both arrays, upperCase and symbols arrays into one array.
So now once both boxes are checked we'll have:
If we wanted to have a mixed password of symbols and numbers the code would have been:
And the results on the browser:
Now let's move to the emoji part. It is time to add some code so that when we click on the copy/paste emoji, the password is copied.
To do that first we'll add an input of type "text" in the HTML file and we'll give it a class name of "hiddenInput".
And then we're going to hide this input using CSS:
Why did we add an input and hid it? Because we will put the password in the and then we can copy it. It is easier to copy elements from an <input> or a <textarea> .
If you want to avoid creating an input at this stage you can set the <input> area where the password will be displayed instead of <div></div> from the beginning.
Now let's add some JavaScript.
We'll start by selecting the <input> element and store it in a variable called hidden.
Now, we will select the emoji. We'll go to the clear() function we created, and there as we added the emoji to the <div></div> every time it is cleared, we will tell our function to add a class with a name of "myStyle" every time the <div></div> cleared and the emoji added.
And we'll create one last function called selectPassword().
In this function we selected the the emoji and put it in a variable called newSpan.
Then we added an eventListener, so that when we click on the emoji, the password is copied.
So at the click we want the <div></div> value to be split, that's why we have passwordContainer.split("") syntax. This syntax will give us an array like this:
As you can see, the first element of the array is the emoji, and the rest is the password. We want to copy only the password, so we will remove the 1st element of the array that has index 0. Hence the syntax splitPassword.splice(0,1).
Now that we removed the 1st element of the array, we will join the rest of the elements to give us the password displayed on the screen. So we used splitPassword.join(). Now once the array elements are joined, we will put this string in the <input> element we added, and to do that we'll use hidden.value.
Now the password is inside the <input> element, we will select all the area where the password is using hidden.select() syntax.
And finally we can copy the password by adding navigation.clipboard.writeText(). This syntax is asynchronous, so we have to add a then() method.
Now once the password is copied in the console we'll have the message: value "Password" successfully copied.
So we have our function all set, all what is left to do is to call it inside the button.addEvetListener() code.
So that's all for this project. Hope this was useful and you can find the complete code in my blog:
Password Generator