HW20 passwordConfirm

homework20/my-app/src/App.js

@@ -38,6 +38,38 @@ const RangeInput = ({min, max}) => {
   )
 }
 
+const PasswordConfirm = ({min}) => {
+
+  const [firstPass,  setValue] = useState("123");
+  const [secondPass,  setsecValue] = useState("123");
+  const [color,  setColorValue] = useState("red");
+
+
+  const checkPassword = (newVal, confirmVal) => {
+    return (newVal.length > min && confirmVal.length > min && newVal == confirmVal) ? "green" : "red";
+  }
+  
+
+  return (
+    <>
+    <h3 style = {{color: color}} >{color}</h3>
+
+    <input type="password"  value = {firstPass} style = {{backgroundColor: color}} onChange = {(e) => {
+      setValue(e.target.value);
+      setColorValue(checkPassword(e.target.value, secondPass));
+    }}
+      />
+      
+    <input type="password"value = {secondPass}  style = {{backgroundColor: color}} onChange = {(e) => {
+      setsecValue(e.target.value);
+      setColorValue(checkPassword(e.target.value, firstPass));
+      }}/>
+    </>
+  )
+
+}
+
+
 const App = () => {
   
   return (
@@ -58,9 +90,15 @@ const App = () => {
 
       </div>
 
-    <div>
-    <RangeInput min={2} max={10} />
+    <div id = "rangeInput">
+      <h2>Range Input</h2>
+        <RangeInput min={2} max={10} />
     </div>
+
+    <div id = "passwordConfirm">
+      <PasswordConfirm min = {3}  />
+    </div>
+
     </>
 
 

homework20/my-app/src/index.css

@@ -23,3 +23,22 @@ code {
     monospace;
 }
 
+#rangeInput {
+  width: 40%;
+  background-color: orange;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#passwordConfirm {
+  width: 40%;
+  background-color: rgb(217, 255, 0);
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}