# Strong Password

> Create the logic for a password strength checker that validates whether the user's password meets specific security rules.

- Difficulty: intermediate
- Tags: useState, useEffect
- Estimated time: 30 minutes
- Tests: 10
- Requires subscription: yes

## Overview

Create the logic for a password strength checker that validates whether the user's password meets specific security rules.


## Requirements

- Make the password input controlled with React state.
- Implement a button to toggle between showing and hiding the password.
- Update the list of validation rules dynamically as the user types.
- Mark each rule as passed or failed based on the password’s content.
- Each rule that is valid should apply the class `text-green-500`.
- Validate the following conditions:
  - Minimum of 8 characters
  - Contains at least one lowercase letter
  - Contains at least one uppercase letter
  - Contains at least one number
  - Contains at least one special character


## Notes

- The list items already include `data-testid` attributes used by the tests.
- Keep the component accessible and provide clear visual feedback.
- You can use regular expressions to test password conditions.
- Avoid mutating state directly — update checks immutably.
- The visibility toggle button should change the input `type` between `"password"` and `"text"`.
- Make sure the UI updates live as the user types.


## Tests

01. renders all password rules
02. marks rule 0 (min length) as true for length >= 8
03. marks rule 1 (lowercase) as true when contains lowercase
04. marks rule 2 (uppercase) as true when contains uppercase
05. marks rule 3 (numbers) as true when contains digits
06. marks rule 4 (special chars) as true when contains symbols
07. resets checks when password no longer meets criteria
08. should hide password by default
09. should show password when toggle button is clicked
10. should hide password again when clicked twice