123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- import './App.css';
- import { clear } from '@testing-library/user-event/dist/clear';
- import React, {useState, useEffect} from 'react';
- import watch from "./img/ClockFace.png";
- import hourArrow from "./img/ClockFace_H.png";
- import minuteArrow from "./img/ClockFace_M.png";
- import secondArrow from "./img/ClockFace_S.png";
- // Spoiler
- const Spoiler = ({header="+", open=true, children}) => {
- const [isOpen, setOpen] = useState(open)
- return <>
- <button onClick={() => setOpen(!isOpen)}>{header}</button>
- {!isOpen && children}
- </>
- }
- // RangeInput
- const RangeInput = ({min, max}) => {
- const [text, setText] = useState("")
- return <>
- <input
- style={ {color: (text.length <= min || text.length > max) ? 'red' : 'black'}}
- value={text}
- onChange={(e) => setText(e.target.value)}>
- </input>
- </>
- }
- // PasswordConfirm
- const PasswordConfirm = ({min}) => {
- const [pswd, setPswd] = useState("")
- const [pswd2, setPswd2] = useState("")
- return <>
- <h3>password:</h3>
- <input type='password'
- style={ {color: pswd.length <= min ? 'red' : 'black'}}
- onChange={(e) => setPswd(e.target.value)} />
- <h3>repeat password:</h3>
- <input type = 'password'
- style={ {color: pswd !== pswd2 ? 'red' : 'black'}}
- onChange={(e) => setPswd2(e.target.value)} />
- </>
- }
- //Timer
- const Timer = ({seconds}) => {
- const [sec, setSec] = useState(seconds)
- let [pause, setPause] = useState(false)
- let hours = Math.floor(sec / (60 * 60))
- let minuts = Math.floor(sec % (60 * 60) / 60)
- let second = sec % 60
- let interval
- useEffect(() => {
- if (sec <= 0) {
- setPause(true)
- }
- if (!pause) {
- interval = setInterval(() => {
- setSec(sec => sec - 1)
- }, 1000);
- }
- return () => {
- clearInterval(interval)
- }
- }, [pause, sec])
- return (
- <div>
- <h3>Timer</h3>
- <span>{hours}</span> : <span>{minuts}</span> : <span>{second} </span>
- <button onClick={() => { setPause(!pause) }}>{pause ? 'start' : 'stop'}</button>
- </div>
- )
- }
- //TimerControl
- const TimerControl = () => {
- const [hours, setHours] = useState(0)
- const [minutes, setMinutes] = useState(0)
- const [seconds, setSeconds] = useState(0)
- const [arr, setArr] = useState([])
- let sec = hours * 3600 + minutes * 60 + seconds;
- return (
- <>
- <h3>Timer Control</h3>
- <input placeholder='hours'type='number' min='0' value={hours} onChange={(e) => setHours(+e.target.value)} />
- <input placeholder='minutes' type='number' min='0' value={minutes} onChange={(e) => setMinutes(+e.target.value)} />
- <input placeholder='seconds' type='number' min='0' value={seconds} onChange={(e) => setSeconds(+e.target.value)} />
- {arr.map(item=> (<Timer key={item} seconds={sec} />))}
- <button onClick={()=>{setArr([Math.random()]) }}>Start</button>
- </>
- )
- }
- //TimerContainer
- const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>
- const TimerContainer = ({seconds = 1000, refresh, render:Render}) => {
- const [time, setTime] = useState(seconds)
- const [pause, setPause] = useState(false)
- let interval
- useEffect(() => {
- let timeBefore = Math.floor(performance.now())
- interval = setInterval(() => {
- let timeAfter = Math.floor(performance.now())
- !pause && time > 0 ? setTime((seconds - (timeAfter - timeBefore) / 1000)) : setTime(time)
- }, refresh)
-
- return() => {
- clearInterval(interval)
- }
- }, [pause, refresh, seconds])
- return (
- <>
- <h3>Timer Container</h3>
- <div>
- <Render seconds={time} />
- <button onClick={() => {setPause(!pause)}}>{!pause ? 'Stop' : 'Start'}</button>
- </div>
- </>
- )
- }
- //LCD
- const LCD = ({seconds}) => {
- let hours = Math.floor(seconds / 60 / 60)
- let minutes = Math.floor((seconds % 3600) / 60)
- let sec = seconds % 60
-
- return (
- <>
- <div>
- <span>{hours}</span> : <span>{minutes}</span> : <span>{sec.toFixed(2)} </span>
- </div>
- </>
- )
- }
- //Watch
- const Watch = ({seconds}) => {
- let hours = Math.floor(seconds / 60 / 60)
- let minutes = Math.floor((seconds % 3600) / 60)
- let second = seconds % 60
- return (
- <>
- <h3>Watch</h3>
- <div className='Watch'>
- <img
- className='Clock'
- src={watch}
- alt="Watch" />
- <img
- className="Arrows"
- style={{ transform: `rotate(${(360 / 12) * hours}deg)` }}
- src={hourArrow}
- alt="Hours"
- />
- <img
- className="Arrows"
- style={{ transform: `rotate(${(360 / 12 /5) * minutes}deg)` }}
- src={minuteArrow}
- alt="Minutes"
- />
- <img
- className="Arrows"
- style={{ transform: `rotate(${(360 / 12 /5) * second}deg)` }}
- src={secondArrow}
- alt="Seconds"
- />
- </div>
- </>
- )
- }
- const TimerContainerWatch = ({seconds = 1000, refresh, render:Render}) => {
- const [time, setTime] = useState(seconds)
- const [pause, setPause] = useState(false)
- let interval
- useEffect(() => {
- let timeBefore = Math.floor(performance.now())
- interval = setInterval(() => {
- let timeAfter = Math.floor(performance.now())
- !pause && time > 0 ? setTime((seconds - (timeAfter - timeBefore) / 1000)) : setTime(time)
- }, refresh)
-
- return() => {
- clearInterval(interval)
- }
- }, [pause, refresh, seconds])
- return (
- <>
- <div>
- <Render seconds={time} />
- </div>
- </>
- )
- }
- function App() {
- return (
- <div className="App">
- <div>Spoiler:</div>
- <Spoiler header={<h1>Заголовок</h1>} open>
- Контент 1
- <p>
- лорем ипсум траливали и тп.
- </p>
- </Spoiler>
- <div>Spoiler 2:</div>
- <Spoiler>
- <h2>Контент 2</h2>
- <p>
- лорем ипсум траливали и тп.
- </p>
- </Spoiler>
- <div>Check input length:</div>
- <RangeInput min={2} max={10}/>
- <PasswordConfirm min={2} />
- <Timer seconds={10000} />
- <TimerControl />
- <TimerContainer seconds={1800} refresh={100} render={LCD} />
-
- {/* <Watch sec={1800}/> */}
- <TimerContainerWatch seconds={1800} refresh={1000} render={Watch} />
- </div>
- );
- }
- export default App;
|