feature update: strength indicator for new password

src/projects/06-password-generator/components/PasswordGenerator.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { characterData } from '../data/characterData';
 import '../styles.css';
 import usePasswordGenerator from '../hooks/usePasswordGenerator';
+import StrengthChecker from './StrengthChecker';
 
 const PasswordGenerator = () => {
   const [passwordLength, setPasswordLength] = useState(8);
@@ -88,10 +89,10 @@ const PasswordGenerator = () => {
           {error ? (
             <p className="error-msg">Select at least one checkbox</p>
           ) : (
-            <div className="strength">
-              <span>strength:</span>
-              <span>good</span>
-            </div>
+            <StrengthChecker
+              length={passwordLength}
+              checkboxData={checkboxData}
+            />
           )}
 
           {/* generate button */}

src/projects/06-password-generator/components/StrengthChecker.jsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+const StrengthChecker = ({ length, checkboxData }) => {
+  const [strength, setStrength] = useState('');
+
+  useEffect(() => {
+    const charTypeCount = checkboxData.reduce((acc, curr) => {
+      if (curr.state) {
+        acc++;
+      }
+      return acc;
+    }, 0);
+
+    if (length < 5 && charTypeCount === 1) {
+      setStrength('very weak');
+    } else if (length < 7 && charTypeCount <= 2) {
+      setStrength('weak');
+    } else if (length < 9 && charTypeCount <= 2) {
+      setStrength('good');
+    } else if (length <= 9 && charTypeCount <= 3) {
+      setStrength('very good');
+    } else if (length <= 15 && charTypeCount <= 1) {
+      setStrength('good');
+    } else if (length <= 15 && charTypeCount <= 3) {
+      setStrength('Excellent');
+    } else if (length <= 20 && charTypeCount <= 4) {
+      setStrength('super strong');
+    } else {
+      setStrength('');
+    }
+  }, [length, checkboxData]);
+  return (
+    <div className="strength">
+      <span>strength:</span>
+      <span>{strength}</span>
+    </div>
+  );
+};
+export default StrengthChecker;