Password Strength
React.js
easy
Description
Build a password strength checker in React that evaluates and displays the strength level of a user's password. The goal of this problem is to create a password strength checker that evaluates the strength of a given password based on specific criteria. The password is considered strong if it meets all or 4 of the following rules:
- Length: At least 8 characters.
- Uppercase Letters: At least one uppercase letter (A-Z).
- Lowercase Letters: At least one lowercase letter (a-z).
- Numbers: At least one digit (0-9).
- Special Characters: At least one special character (e.g., @, #, $, %, etc.).
Strength Levels:
- Level 1: Password meets only 1 of the 5 criteria
- Level 2: Password meets 2 or 3 of the 5 criteria
- Level 3: Password meets 4 or 5 of the 5 criteria
- If the password does not meet any criteria, it's considered a weak password and the function returns " Weak Password ".
Important Instructions
- Define a helper function called
checkPasswordStrength
inside the same file. - Export that helper function so it can be tested separately
- The UI should have:
- An input field for password
- A button to check strength
- A strength result displayed after clicking
Example Inputs & Outputs
Example 1:
- Input:
""
- Output:
"Weak Password"
- Explanation: The password is empty, so it doesn't meet any criteria.
Example 1:
- Input:
"abc123"
- Output:
"Level 1"
- Explanation: The password contains lowercase letters and numbers but doesn't meet the other criteria (uppercase, special character).
Example 2:
- Input:
"abc123ABC"
- Output:
"Level 2"
- Explanation: The password meets 3 criteria: length (>=8), lowercase, and numbers, but lacks a special character.
Example 3:
- Input:
"Abc12345"
- Output:
"Level 2"
- Explanation: The password meets 4 criteria: length, uppercase, lowercase, and numbers, but lacks a special character.
Example 4:
- Input:
"Abc@1234"
- Output:
"Level 3"
- Explanation: The password meets all 5 criteria: length (>=8), uppercase, lowercase, numbers, and special character.
Reference UI
Preview what you need to build
Solve Similar questions 🔥