timer work in progress

hw19-react-jsx-homework/src/App.js

@@ -14,6 +14,71 @@ const Spoiler = ({header="+", open=true, children}) => {
   )
 }
 
+const RangeInput = ({min=1, max=10, type='text'}) => {
+  let [valueLen, setValue] = useState()
+  return (
+    <div>
+      <input 
+        type={type} 
+        style={{outlineColor: valueLen < min || valueLen > max ? 'red' : 'black'}} 
+        onChange={(e) => setValue(e.target.value.length)}
+      />
+    </div>
+  )
+}
+
+const PasswordConfirm = ({min=8}) => {
+  let [pass='', setPass] = useState()
+  let [passRepeat, setPassReapeat] = useState()
+
+  return (
+    <div style={{border: '1px solid black', backgroundColor: 'whitesmoke', width: 'fit-content'}}>
+      <input 
+        type='password'
+        style={{
+          display: 'block',
+          borderColor: pass === passRepeat && 
+          pass.length >= min && /[0-9]/.test(pass) && !/[\s]/.test(pass)? 'mediumseagreen': 'red'
+        }}
+        placeholder='password' 
+        onChange={(e) => setPass(e.target.value)}
+      />
+      <br/>
+      <input 
+        type='password'
+        style={{
+          display: 'block',
+          borderColor: pass === passRepeat? 'mediumseagreen' : 'red',
+          visibility: pass.length >= min && 
+          /[0-9]/.test(pass) && !/[\s]/.test(pass)? 'visible' : 'hidden' 
+        }}
+        placeholder='repeat password'
+        onChange={(e) => setPassReapeat(e.target.value)}
+      />
+    </div>
+  )
+}
+
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+const Timer = ({seconds=61}) => {
+  let initial = seconds
+  let [time=seconds,  setTime] = useState();
+  let startTime = performance.now();
+  console.log(performance.now())
+    // (async () => {
+    //   for(let i = 0; i < initial; i++) {
+    //     await delay(1000)
+    //     setTime(time - 1000)
+    //   }
+    // })()
+  return (
+    <>
+     <strong>{startTime - performance.now()}</strong>
+     <strong>{Math.floor(((time*1000) / (1000 * 60 * 60)) % 24)} : {Math.floor(((time*1000) / (1000 * 60)) % 60)} : {Math.floor(((time*1000) / 1000) % 60)}</strong>
+    </>
+  )
+}
 
 
 function App() {
@@ -24,8 +89,15 @@ function App() {
         <p>
             лорем ипсум траливали и тп.
         </p>
-        <img src={logo} width="200" heigt="200"/>
+        <img alt="img" src={logo} width="200" heigt="200"/>
+        <h3>Range Input</h3>
+        <RangeInput min={2}/>
       </Spoiler>
+      <br />
+      <h3>Password Confirm</h3>
+      <PasswordConfirm />
+      <h3>Timer</h3>
+      <Timer seconds={1100}/>      
     </div>
   );
 }