|
@@ -0,0 +1,159 @@
|
|
|
+import './App.css';
|
|
|
+import { useState , useEffect } from 'react'
|
|
|
+const Spoiler = ({ header = "+", open = false, children }) => {
|
|
|
+ const [check, setCheck] = useState(open)
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <div>{header}</div>
|
|
|
+ {check ? <button onClick={() => setCheck(!check)}>Закрыть</button> : <button onClick={() => setCheck(!check)}>Открыть</button>}
|
|
|
+ {check && <div>{children}</div>}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const RangeInput = ({ min, max }) => {
|
|
|
+ const [enter, setEnter] = useState('')
|
|
|
+
|
|
|
+ return (
|
|
|
+ // <input value = {enter} onChange = { e => {(e.target.value.length < min || e.target.value.length > max) ? (e.target.style.backgroundColor = "red") : (e.target.style.backgroundColor = "#fff")
|
|
|
+ // setEnter(e.target.value)}} />
|
|
|
+ < input value={enter} style={(enter.length < min || enter.length > max) ? { backgroundColor: 'red' } : { backgroundColor: 'white' }} onChange={e => setEnter(e.target.value)} />
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const PasswordConfirm = ({ min }) => {
|
|
|
+ const [password, setPassword] = useState('')
|
|
|
+ const [password2, setPassword2] = useState('')
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <input value={password} onChange={e => setPassword(e.target.value)} />
|
|
|
+ <input value={password2} onChange={e => setPassword2(e.target.value)} />
|
|
|
+ <button disabled={password.length < min || password2.length < min}
|
|
|
+ onClick={() => {
|
|
|
+ (!password.match(/\d/)) ? console.log('добавьте числа') :
|
|
|
+ (password !== password2) ? console.log('пароли не совпадают') : console.log('pass: ', password2)
|
|
|
+ }}>
|
|
|
+ Регистрация
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const Timer = ({timer, started}) => {
|
|
|
+ const [seconds, setSeconds] = useState(timer*1000)
|
|
|
+ const [pause, setPause] = useState(true)
|
|
|
+
|
|
|
+ let hou = Math.floor(seconds / 3600000)
|
|
|
+ let min = Math.floor(seconds % 3600000 / 60000)
|
|
|
+ let sec = Math.floor(seconds % 3600000 % 60000 / 1000)
|
|
|
+
|
|
|
+ useEffect(() =>{
|
|
|
+ if(pause && started){
|
|
|
+ let int = setInterval(()=>setSeconds((seconds) => seconds - 1000),1000)
|
|
|
+ return ()=> {
|
|
|
+ clearInterval(int)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } ,[started, pause])
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {pause ? <button disabled={!started} onClick={()=>setPause(!pause)}>Stop</button>: <button onClick={()=>setPause(!pause)}>Go</button>}
|
|
|
+ <p>{seconds > 0 && `${hou} hours ${min} minutes ${sec} seconds` || "Таймер прошел"}</p>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const TimerControl = ({}) => {
|
|
|
+ const [started,setStarted] = useState(false)
|
|
|
+ const [hours, setHours] = useState('1')
|
|
|
+ const [minutes, setMinutes] = useState('1')
|
|
|
+ const [sec, setSec] = useState('1')
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <h1>TimerControl</h1>
|
|
|
+ <input type = 'number' value = {hours} onChange= {e => setHours(e.target.value)} />
|
|
|
+ <input type = 'number' value = {minutes} onChange= {e => setMinutes(e.target.value)} />
|
|
|
+ <input type = 'number' value = {sec} onChange= {e => setSec(e.target.value)} />
|
|
|
+ <button disabled = {!hours || !minutes || !sec} onClick = {()=> {setStarted(true)}}>Start2</button>
|
|
|
+ {started && <Timer timer = {((+hours * 60 * 60) + (+minutes * 60) + +sec)} started={started}/>}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>
|
|
|
+
|
|
|
+const TimerContainer = ({seconds,refresh,render}) => {
|
|
|
+ const Render = render
|
|
|
+ const [start,setStart] = useState(false)
|
|
|
+ const [time,setTime] = useState(seconds)
|
|
|
+ // let hou = Math.floor(time / 3600000)
|
|
|
+ // let min = Math.floor(time % 3600000 / 60000)
|
|
|
+ // let sec = Math.floor(time % 3600000 % 60000 / 1000)
|
|
|
+
|
|
|
+ useEffect(() =>{
|
|
|
+ if(start) {
|
|
|
+ let int = setInterval(() => setTime((time) => time - refresh),refresh)
|
|
|
+ return () => {
|
|
|
+ clearInterval(int)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },[start])
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {start ? <button disabled={seconds<0} onClick={()=>setStart(!start)}>Stop</button>: <button onClick={()=>setStart(!start)}>Go</button>}
|
|
|
+ <Render seconds={time}></Render>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const TimerNoState = ({seconds}) => {
|
|
|
+ let h = Math.floor(seconds / 3600000)
|
|
|
+ let m = Math.floor(seconds % 3600000 / 60000)
|
|
|
+ let s = Math.floor(seconds % 3600000 % 60000 / 1000)
|
|
|
+return(
|
|
|
+ <div>
|
|
|
+ <p>{`${h}: ${m}: ${s}`}</p>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const Watches = ({}) => {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function App() {
|
|
|
+ return (
|
|
|
+ <div className="App">
|
|
|
+ {/* <Spoiler header={<h1>Заголовок</h1>} open>
|
|
|
+ <h2>Контент 1</h2>
|
|
|
+ <p>
|
|
|
+ лорем ипсум траливали и тп.
|
|
|
+ </p>
|
|
|
+ </Spoiler>
|
|
|
+
|
|
|
+ <Spoiler>
|
|
|
+ <h2>Контент 2</h2>
|
|
|
+ <p>
|
|
|
+ лорем ипсум траливали и тп.
|
|
|
+ </p>
|
|
|
+ </Spoiler>
|
|
|
+
|
|
|
+ <RangeInput min={2} max={10} />
|
|
|
+
|
|
|
+ <PasswordConfirm min={2} /> */}
|
|
|
+
|
|
|
+ {/* <Timer timer={300000} started={true}/> */}
|
|
|
+
|
|
|
+ <TimerControl />
|
|
|
+ {/* <TimerContainer seconds={180000} refresh={100} render={SecondsTimer}/>
|
|
|
+
|
|
|
+ <TimerContainer seconds={18000} refresh={1000} render={TimerNoState} /> */}
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default App;
|