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> ); }