However, this is the first time I am going to make such a random password generator. As you can see in the picture above, I first painted the background of a web page blue. Then I made a small box on that page. First of all, I added a text in that box.
Below that is a small display or input where the password can be generated. I also made two buttons at the bottom. One of those buttons will generate a password and the other will copy the password.
We have added different types of elements such as numbers, characters, symbols using varchars. This time the characters will be connected to each other to create a different password each time.
See the Pen
Untitled by Foolish Developer (@fghty)
How to Build a Random Password Generator
Step 1: Create a box in the webpage
The box was created on everyone’s first web page. Which will be created using the following HTML and CSS code. Here I have used the background color of web page # 0581ca. You can use any other background color if you want.
I have used white as the background color of the box. In this case, we did not specify a specific height or size of the box, it will depend on the amount of content.
Step 2: Add headings or titles
Now we will add a heading to this box. I have used the following HTML and CSS codes for this. I have used the font size of this heading as 26px and color # 015a96. I used text-align: center to place the text in the middle of the box.
Step 3: Create a display using input
I made a small display using input. It will be seen where different passwords will be generated each time. I have used the height of this input 50 px and the width 400 px.
I used border-radius: 6px to make it slightly round. Used border: 2px solid rgb (13, 152, 245) to make it brighter.
Step 4: Create two buttons using Html and CSS
I made the following two buttons to generate and copy the password. I have set the height of these two buttons to 50 px and the width to 150 px.
I have used the background color blue and the text color white. I used margin-left: 85px to create the distance between the two buttons.
In varchars, I have added different numbers, numbers, symbols, etc. These symbols and numbers associated with each other will create random passwords.
I have determined the number of passwords using var passwordLength. Here I have used 12 which will create a password with 13 (12 + 1) characters each time. You can increase the amount if you want
Here Math.random () will help to create a random password.
Then at the end of all, I will show this password in the input box. I used the ID password of the input and set a constant of that ID. Now I will show the condition made above in the input box through that constant.
Now I will make the copy button in the design effective. As you have seen before, there is an option to click on which all the passwords will be copied. This copy button is directly connected to that input. Whatever is written in the input box will be copied with the help of that copy button.
Similarly, now we have determined the variable of the ID of the input box. Then I activated the button using document.execCommand.
If you have difficulty understanding then you can watch the video tutorial above which will help you to understand better. I have already made more designs like random password generators. You can see those if you want. Please let us know in the comments how you like this tutorial.