PasswordConfirm+

JSX-homework/src/App.js

@@ -62,7 +62,7 @@ const Counters = () => {
 const RangeInput = ({min,max}) => {
   const [value, SetValue] = useState(0);
   let color = "white";
-  console.log(value);
+  
   /* useEffect(() => {
     if(value < min || value > max){
         color = "red";
@@ -73,7 +73,7 @@ const RangeInput = ({min,max}) => {
   }, [value]) */
   if(value < min || value > max) {
     color = "red"
-    console.log(color);
+    
   } else {
     color = "";
   }
@@ -82,6 +82,28 @@ const RangeInput = ({min,max}) => {
   )
 }
 
+const PasswordConfirm = ({min}) => {
+
+    const[value1,SetValue1] = useState('');
+    const[value2,SetValue2] = useState('');
+    let color = "";
+    let pattern = /^[0-9a-zA-Z]+$/;
+    if(value1.length > min && value2.length > min && value1.match(pattern) && value2.match(pattern) && value1 === value2)  {
+      color="green"
+    } else {
+      color="red";
+    }
+
+    return(
+      <div>
+        <input type="password" onChange={e => SetValue1(e.target.value)} style={{borderColor:color}}/>
+        <input type="password" onChange={e => SetValue2(e.target.value)} style={{borderColor:color}}/>
+      </div>
+    )
+}
+
+
+
 
 function App () {
   return(
@@ -93,6 +115,7 @@ function App () {
         <p>blabla</p>
       </Spoiler>
       <RangeInput min={2} max={10}/>
+      <PasswordConfirm min={2}/>
     </div>
   );
 }