Day-6 of React with Me

Creating a Password Generator with React

In this project, I utilized React to build a simple password generator. The generator allows users to customize the length of the password and choose whether to include numbers and special characters.

User Interface

Setting up the State

I used the useState hook to manage the state of the password length, whether numbers are allowed, whether special characters are allowed, and the generated password itself. Additionally, I used the useRef hook to create a reference to the password input field, which I later used to copy the generated password to the clipboard.

Generating the Password

The passwordGenerator function is responsible for generating the password based on the user's input. It creates a string containing uppercase and lowercase letters and optionally includes numbers and special characters, based on the user's selections. It then iterates over the selected length and randomly selects characters from the string to build the password.

Copying Password to Clipboard

To allow users to easily copy the generated password, I created a copyPassToClipboard function. This function selects the password input field and then uses the navigator.clipboard.writeText method to copy the password to the clipboard.

Updating the Password on Input Change

I used the useEffect hook to call the passwordGenerator function whenever there is a change in the password length, whether numbers are allowed, or whether special characters are allowed. This ensures that the password is regenerated whenever the user makes a change to the settings.

Conclusion

In conclusion, this project demonstrates how to create a password generator using React. It provides a simple yet effective way for users to generate secure passwords with customizable settings.

Code of the project -https://github.com/piyusss11/password-with-react