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.
React Password Generator challenge will test you in the following skills:
- Familiarity with the react
- Using copy to clipboard in ReactJS
- How to conditionally set state in Reactjs
How to start
- Fork Reactjs Coding Challenges GitHub repo
- Go to password-generator folder using
cd password-generatorvia terminal
- Run npm install or yarn to install dependencies
- 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
As soon the app loads, input will contain a random password of length eight characters
Every time you click the refresh button (icon) it will generate a new password
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
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: !@#$%^&*()
If the user unchecked all checkboxes, the lowercase checkbox will become a tick (checked) automatically, for a better understanding play with the demo app
If password length is less than 8, the password strength message (below password input) will be “Too short”, and the color will be Red
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
Different colors should represent the password strength; you can find color HEX codes in
variables.cssand utility classes in
a. Weak: Red
b. Medium: Orange
c. Hard: Green
As the React project is built with TypeScript, for this challenge, ensure that all code is written using TypeScript
Last but not least make sure there isn't any error or warning in the console
- For password-strength logic you can create an array, then run a loop, and inside the loop, look for conditions and test for password
- This npm package will help you to copy to the clipboard feature (already installed)
Looking for a solution?
You can also subscribe to Codevertiser Magazine Newsletter and get the latest coding challenges delivered straight to your inbox