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>
);
}
No comments yet. Start the discussion!