The design I will show you here is a random password generator. In the case of Random Password Generator, you will not be able to customize the password.
However, it is very difficult to create a project to create a password manually. Here I will tell you everything about how this project creates different passwords each time.
This Simple Password Generator is designed as a neumorphism design. Already using neumorphism design I have created many types of elements.
As you can see I have created a box on the webpage. This box contains the first display in which the generated password can be seen. Then there are the two buttons. The first button will create a different password each time.
A strong password will be generated automatically whenever you click on the button. It also has a button to copy. When you click on that button, the text or password you see in the display will be copied.
Create a box for Password Generator
Here I have shared a step-by-step tutorial for you. So there is no reason to worry. The possible explanations of each line I have given here. However, if you find it boring to read the tutorial, you can download the source code.
Password viewing input box
Now a display is created using HTML input. However, you can not input anything in this input. Because “readonly” is used in the input.
So you can only read the value in the input box. Height: 50px, width: 360px, and in this case the background color is equal to the background color of the webpage.
Password Generator’s control button
Now two buttons have been created. The first button is for creating a password and the second is for copying.
The width of this button: 150px, height: 45px has been used and shadow has been used all around. display: flex has been used so the two buttons can be seen side by side. Then the hover effect has been added.
So far we have only designed by HTML and CSS. This Simple Password Generator has not been activated yet.