ReactJS Program to Password Strength Hint with Explanation
ReactJS
Medium
Forms & Validation
31 views
1 min read
84 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around strength, password, hint. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Show a live password strength hint while user types.
Input Format
No input.
Output Format
Render a React component.
Constraints
Derive strength from length and character variety.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React, { useMemo, useState } from 'react';
function scorePassword(pw) {
let score = 0;
if (pw.length >= 8) score += 1;
if (/[A-Z]/.test(pw)) score += 1;
if (/[0-9]/.test(pw)) score += 1;
if (/[^A-Za-z0-9]/.test(pw)) score += 1;
return score;
}
export default function App() {
const [pw, setPw] = useState('');
const score = useMemo(() => scorePassword(pw), [pw]);
const labels = ['Very weak', 'Weak', 'Ok', 'Good', 'Strong'];
const colors = ['#c1121f', '#c1121f', '#ffb200', '#0b5', '#0b5'];
return (
<div style={{ padding: 16, width: 420 }}>
<h2 style={{ marginTop: 0 }}>meetcode sign up</h2>
<label>
Password
<div>
<input type='password' value={pw} onChange={(e) => setPw(e.target.value)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb', width: '100%' }} />
</div>
</label>
<div style={{ marginTop: 10, fontWeight: 700, color: colors[score] }}>{labels[score]}</div>
<div style={{ marginTop: 6, height: 10, borderRadius: 999, background: '#eee', overflow: 'hidden' }}>
<div style={{ height: '100%', width: ((score / 4) * 100) + '%', background: colors[score] }} />
</div>
</div>
);
}
Output Example
No sample I/O is provided for this question.
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Solution Guide
Problem
Show a live password strength hint while user types.
Input / Output
Output
Render a React component.
Constraints
Derive strength from length and character variety.
Details
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Difficulty
Medium
ReactJS
Official Solution
import React, { useMemo, useState } from 'react';
function scorePassword(pw) {
let score = 0;
if (pw.length >= 8) score += 1;
if (/[A-Z]/.test(pw)) score += 1;
if (/[0-9]/.test(pw)) score += 1;
if (/[^A-Za-z0-9]/.test(pw)) score += 1;
return score;
}
export default function App() {
const [pw, setPw] = useState('');
const score = useMemo(() => scorePassword(pw), [pw]);
const labels = ['Very weak', 'Weak', 'Ok', 'Good', 'Strong'];
const colors = ['#c1121f', '#c1121f', '#ffb200', '#0b5', '#0b5'];
return (
<div style={{ padding: 16, width: 420 }}>
<h2 style={{ marginTop: 0 }}>meetcode sign up</h2>
<label>
Password
<div>
<input type='password' value={pw} onChange={(e) => setPw(e.target.value)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb', width: '100%' }} />
</div>
</label>
<div style={{ marginTop: 10, fontWeight: 700, color: colors[score] }}>{labels[score]}</div>
<div style={{ marginTop: 6, height: 10, borderRadius: 999, background: '#eee', overflow: 'hidden' }}>
<div style={{ height: '100%', width: ((score / 4) * 100) + '%', background: colors[score] }} />
</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
