|
@@ -17,9 +17,12 @@ 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)}} />
|
|
|
+ <>
|
|
|
+ <h1>RangeInput</h1>
|
|
|
+ {/* <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)} />
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
|
|
@@ -28,6 +31,7 @@ const PasswordConfirm = ({ min }) => {
|
|
|
const [password2, setPassword2] = useState('')
|
|
|
return (
|
|
|
<div>
|
|
|
+ <h1>PasswordConfirm</h1>
|
|
|
<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}
|
|
@@ -59,8 +63,9 @@ const Timer = ({timer, started}) => {
|
|
|
} ,[started, pause])
|
|
|
return (
|
|
|
<div>
|
|
|
- {pause ? <button disabled={!started} onClick={()=>setPause(!pause)}>Stop</button>: <button onClick={()=>setPause(!pause)}>Go</button>}
|
|
|
+ <h1>Timer</h1>
|
|
|
<p>{seconds > 0 && `${hou} hours ${min} minutes ${sec} seconds` || "Таймер прошел"}</p>
|
|
|
+ {pause ? <button disabled={!started} onClick={()=>setPause(!pause)}>Stop</button>: <button onClick={()=>setPause(!pause)}>Go</button>}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
@@ -103,8 +108,8 @@ const TimerContainer = ({seconds,refresh,render}) => {
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
- {start ? <button disabled={seconds<0} onClick={()=>setStart(!start)}>Stop</button>: <button onClick={()=>setStart(!start)}>Go</button>}
|
|
|
<Render seconds={time}></Render>
|
|
|
+ {start ? <button disabled={seconds<0} onClick={()=>setStart(!start)}>Stop</button>: <button onClick={()=>setStart(!start)}>Go</button>}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
@@ -115,15 +120,12 @@ const TimerNoState = ({seconds}) => {
|
|
|
let s = Math.floor(seconds % 3600000 % 60000 / 1000)
|
|
|
return(
|
|
|
<div>
|
|
|
+ <h1>TimerNoState</h1>
|
|
|
<p>{seconds>0 && `${h}: ${m}: ${s}` || "timer over"}</p>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-const Watches = ({}) => {
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
const Watch = ({hr,mr,sr}) =>
|
|
|
<div style = {{position:"relative", height:"1000px"}}>
|
|
|
<img style = {{position:"absolute"}} src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace.png"></img>
|
|
@@ -132,7 +134,6 @@ const Watch = ({hr,mr,sr}) =>
|
|
|
<img style = {{position:"absolute",transform:`rotate(${sr}deg)`}} src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_S.png"></img>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
const date = new Date()
|
|
|
|
|
|
const WatchCont = () => {
|
|
@@ -154,6 +155,7 @@ const WatchCont = () => {
|
|
|
let sec = Math.floor(seconds % 3600 % 60)
|
|
|
return (
|
|
|
<div>
|
|
|
+ <h1>Watches</h1>
|
|
|
<Watch hr = {hou * 30} mr = {min * 6} sr = {sec * 6} />
|
|
|
</div>
|
|
|
)
|
|
@@ -163,7 +165,7 @@ const WatchCont = () => {
|
|
|
function App() {
|
|
|
return (
|
|
|
<div className="App">
|
|
|
- {/* <Spoiler header={<h1>Заголовок</h1>} open>
|
|
|
+ <Spoiler header={<h1>Заголовок</h1>} open>
|
|
|
<h2>Контент 1</h2>
|
|
|
<p>
|
|
|
лорем ипсум траливали и тп.
|
|
@@ -179,11 +181,11 @@ function App() {
|
|
|
|
|
|
<RangeInput min={2} max={10} />
|
|
|
|
|
|
- <PasswordConfirm min={2} /> */}
|
|
|
+ <PasswordConfirm min={2} />
|
|
|
|
|
|
- {/* <Timer timer={300000} started={true}/> */}
|
|
|
+ <Timer timer={300000} started={true}/>
|
|
|
|
|
|
- {/* <TimerControl /> */}
|
|
|
+ <TimerControl />
|
|
|
<TimerContainer seconds={180000} refresh={100} render={SecondsTimer}/>
|
|
|
|
|
|
<TimerContainer seconds={18000} refresh={1000} render={TimerNoState} />
|