first commit

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +1,147 @@
 import logo from './logo.svg';
 import './App.css';
+import { useState, useEffect } from "react";
+
+const Spoiler = ({ header = "+", open, children }) => {
+
+    const [openMode, setOpenMode] = useState(open)
+    return (
+        <div onClick={() => setOpenMode(!openMode)}>
+            {header}
+            {openMode && children}
+        </div>
+    )
+}
+
+const RangeInput = ({ min, max }) => {
+
+    const [state, setState] = useState('')
+    const colorBorder = state.length <= min || state.length >= max ? 'red' : ''
+
+    return <input style={{ backgroundColor: colorBorder }}
+        onChange={(e) => { setState(e.target.value) }} />
+}
+
+
+const PasswordConfirm = ({ min }) => {
+
+    const [checked, setChecked] = useState(false)
+    const [stateInputOne, setStateInputOne] = useState('')
+    const [stateInputTwo, setStateInputTwo] = useState('')
+    const reg = /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/
+    const disabledBtn = stateInputOne === stateInputTwo && reg.test(stateInputOne) ? false : true
+    return (
+        <div>
+            <input style={{ borderColor: stateInputOne.length <= min ? 'red' : 'black' }}
+                type={checked ? 'password' : 'text'}
+                onChange={(e) => { setStateInputOne(e.target.value) }} />
+
+            <input style={{ borderColor: stateInputTwo.length <= min ? 'red' : 'black' }}
+                type={checked ? 'password' : 'text'}
+                onChange={(e) => { setStateInputTwo(e.target.value) }} />
+            <input type='checkbox'
+                checked={checked}
+                onChange={(e) => setChecked(e.target.checked)}
+            />
+            <button disabled={disabledBtn} >Я кнопка</button>
+        </div>
+    )
+}
+
+const Timer = ({ ms = 5 }) => {
+
+    const [counter, setCounter] = useState(ms)
+    let [pause, setPause] = useState(false)
+    let timeCounter
+
+    useEffect(() => {
+        if (counter <= 0) setPause(true)
+        if (!pause) {
+            timeCounter = setInterval(() => {
+                setCounter(counter => counter - 1)
+            }, 1000);
+        }
+        return () => {
+            clearInterval(timeCounter)
+        }
+    }, [pause, counter])
+
+    let hours = Math.floor(counter / 3600)
+    let minuts = Math.floor(counter % 3600 / 60)
+    let second = counter % 60
+
+    return (
+        <div>
+            <span>{hours}</span> : <span>{minuts}</span> : <span>{second} </span>
+            <button onClick={() => { setPause(!pause) }}>{pause ? 'start' : 'stop'}</button>
+        </div>
+    )
+}
+
+const TimerControl = () => {
+    const [hourse, setHours] = useState(0)
+    const [minuts, setMinuts] = useState(0)
+    const [seconds, setSeconds] = useState(0)
+    const [open, setOpen] = useState(false)
+
+    let ms = hourse * 3600 + minuts * 60 + seconds
+
+    return (
+        <div>
+            <label>Hours :
+                <input
+                    min='0'
+                    type='number'
+                    onChange={e => setHours(+e.currentTarget.value)} />
+            </label><br />
+
+            <label>Minuts :
+                <input
+                    min='0'
+                    type='number'
+                    onChange={e => setMinuts(+e.currentTarget.value)} />
+            </label><br />
+
+            <label>Seconds:
+                <input
+                    min='0'
+                    type='number'
+                    onChange={e => setSeconds(+e.currentTarget.value)} />
+            </label>
+
+            <button onClick={() => setOpen(!open)}>{!open ? 'start' : 'stop'}</button>
+            {open && <Timer ms={ms} />}
+        </div>
+
+    )
+}
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    return (
+        <div className="App">
+            <Spoiler header={<h1>Заголовок</h1>} open>
+                Контент 1
+                <p>
+                    лорем ипсум траливали и тп.
+                </p>
+            </Spoiler>
+
+            <Spoiler>
+                <h2>Контент 2</h2>
+                <p>
+                    лорем ипсум траливали и тп.
+                </p>
+            </Spoiler>
+            <RangeInput min={2} max={10} />
+            <hr />
+            <PasswordConfirm min={2} />
+            <hr />
+            <Timer ms={4000} />
+            <hr />
+            <TimerControl />
+            <hr />
+        </div >
+    );
 }
 
 export default App;