What this explores
Real-time password strength analysis with entropy calculation and estimated crack time visualization.
Principles demonstrated
- Password entropy calculation
- Brute-force time estimation
- Real-time validation feedback
- Secure password generation
Build It Yourself
Step-by-step guide to recreate this experiment
Beginner20-30 min
Prerequisites
- Basic JavaScript
- React useState/useEffect
- Regular expressions basics
Create a password input with toggle visibility. Use state to track the password value and whether it should be shown or hidden.
tsx
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
return (
<div className="relative">
<input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter password..."
/>
<button onClick={() => setShowPassword(!showPassword)}>
{showPassword ? 'Hide' : 'Show'}
</button>
</div>
);