ReactJS Challenge #2: Build Functionality for Password Genertor

Strong and memorable passwords are what everyone needs. And that's why we search for a tool to generate strong passwords to protect our privacy and accounts.

What if you develop your own password generator tool?

Yes, you heard right, your password. In this challenge, you will build a react password generator. The good news about this free react challenge is that you don't have to invest energy in developing UI. We have already created the UI; you need to implement the logic and make the tool function.

Testing Skills

React Password Generator challenge will test you in the following skills:

1. Familiarity with the react useState and useEffect hook
2. Using copy to clipboard in ReactJS
3. How to conditionally set state in Reactjs
4. Knowledge of JavaScript setTimeout method
5. You can work with Javascript if conditions and for lops
6. How to randomize string characters or array elements in javascript

How to start

1. Fork Reactjs Coding Challenges GitHub repo
2. Go to password-generator folder using cd password-generator via terminal
3. Run npm install or yarn to install dependencies
4. Run the server, you will then see the below screen on your local host

You are good to go.

Objective: To make a functional app. This is a live link.

User Stories for Password Generator Challenge

1. As soon the app loads, input will contain a random password of length eight characters

2. Every time you click the refresh button (icon) it will generate a new password

3. When you click the copy button, it will copy the password into the clipboard, and copy button text will be copied for 1 second, see the demo app for a better understanding

4. Users will be able to check or uncheck uppercase, lowercase, number, and special characters checkboxes

   a. Uppercase letters: ABCDEFGHIJKLMNOPQRSTUVWXYZ

   b. Lowercase letters: abcdefghijklmnopqrstuvwxyz

   c. Numbers: 0123456789

   d. Special Characters: !@#$%^&*()

5. If the user unchecked all checkboxes, the lowercase checkbox will become a tick (checked) automatically, for a better understanding play with the demo app

6. If password length is less than 8, the password strength message (below password input) will be “Too short”, and the color will be Red

7. You also have to write password strength logic, password strength will show below password input (below logic will be applicable if password length is equal to greater or than 8).

   a. Hard: password contains at least one uppercase, one lowercase, one number, and one special character

   b. Medium: if one of the fields is missing in the password

   c. Easy: if two of the fields are missing in the password

8. Different colors should represent the password strength; you can find color HEX codes in variables.css and utility classes in styles.css file

   a. Weak: Red

   b. Medium: Orange

   c. Hard: Green

9. As the React project is built with TypeScript, for this challenge, ensure that all code is written using TypeScript

10. Last but not least make sure there isn't any error or warning in the console

Hints

1. For password-strength logic you can create an array, then run a loop, and inside the loop, look for conditions and test for password
2. This npm package will help you to copy to the clipboard feature (already installed)

Looking for a solution?

For working code like you have seen in the demo app, you can send me an email at [email protected] or can reach out to me on LinkedIn or Twitter.