123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278 |
- import {useState, useEffect, useRef} from 'react';
- import './App.scss';
- /////////////Spoiler
- const Spoiler = ({ header = "+", open, children }) => {
- const [opening, setOpening] = useState('');
- if (opening !== '') {
- open = opening;
- }
- return <>
- <div onClick={() => setOpening(!open)}>{header}</div>
- <div>{open && children}</div>
- </>
- }
- /////////////RangeInput
- const RangeInput = ({min,max}) => {
- const [text, setText] = useState('')
- return <div><input
- style={{backgroundColor: text.length<min || text.length>max ?'red':'white'}}
- value={text}
- onChange={e => setText(e.target.value)}
- type="text"/></div>
- }
- ////////////LoginForm
- const LoginForm = ({onLogin}) => {
- const [login, setTextLogin] = useState('')
- const [password, setTextPass] = useState('')
- let buttonDisabled= login.length<6 || password.length<6 ? true : false
- return (
- <div>
- <input placeholder='Login'
- value={login}
- onChange={e => setTextLogin(e.target.value)}
- type="text"
- /><br/>
- <input placeholder='Password'
- value={password}
- onChange={e => setTextPass(e.target.value)}
- type="password"
- /><br/>
- <button
- disabled= {buttonDisabled}
- onClick={() => onLogin({login,password})}
- >Login...</button>
- </div>
- )
- }
- ///////////PasswordConfirm
- const PasswordConfirm = ({min}) => {
- const [pass1, setPass1] = useState('')
- const [pass2, setPass2] = useState('')
- let inpunStyle
- let errorText
- let errorText2
- if(pass1===pass2 && pass1.length>=min && pass2.length>=min){
- inpunStyle = 'green'
- errorText =''
- errorText2 =''
- }else{
- pass1!==pass2? errorText = 'Пароли не совпадают':errorText =''
- pass1.length<min && pass2.length<min? errorText2 = `Пароль должени состоять минимум из ${min} символов`:errorText2 =''
- inpunStyle = 'white'
- }
- return <div>Введите пароль<br/>
- <input
- style={{backgroundColor: inpunStyle}}
- value={pass1}
- onChange={e => setPass1(e.target.value)}
- placeholder='Password'
- type="password"
- /><br/>Повторите пароль<br/>
- <input
- style={{backgroundColor: inpunStyle}}
- value={pass2}
- onChange={e => setPass2(e.target.value)}
- placeholder='Password'
- type="password"
- /><div style={{color:'red'}}>{errorText}<br/>{errorText2}</div>
- </div>
- }
- const oneCat = {
- "_id": "62c9472cb74e1f5f2ec1a0d4",
- "name": "iPhone",
- "goods": [
- {
- "_id": "62c9472cb74e1f5f2ec1a0d1",
- "name": "iPhone 4",
- "images": [
- {
- "url": "images/e48e7ee1bcc4ab5432d1e7a3a89b8466"
- },
- {
- "url": "images/58c6157d51d8c2430c4dd41b6d0132f4"
- }
- ]
- },
- {
- "_id": "62c9472cb74e1f5f2ec1a0d2",
- "name": "iPhone X",
- "images": [
- {
- "url": "images/c67956dff69d1160a6e70b71838d7282"
- },
- {
- "url": "images/0153956fc7bf99567e620ee446319b00"
- }
- ]
- },
- {
- "_id": "62c9472cb74e1f5f2ec1a0d3",
- "name": "iPhone 13",
- "images": [
- {
- "url": "images/56c5d476685355221b1a3ba2c554ad91"
- },
- {
- "url": "images/29393a087c933d7caea010c98f4d2876"
- }
- ]
- },
- {
- "_id": "634190ccb74e1f5f2ec1a37b",
- "name": "Iphone14",
- "images": [
- {
- "url": "images/2b2b08dfca28972c19f3f901c68966af"
- }
- ]
- }
- ]
- }
- const origUrl = 'http://shop-roles.node.ed.asmer.org.ua/'
- const GoodCard = ({good}) => {
- const [indexArr, setindexArr] = useState(0)
- return <div>
- {good.name}<br/>
- <img
- onClick={()=>indexArr=== good.images.length-1?setindexArr(0) :setindexArr(indexArr+1)}/////////////
- src={origUrl+good.images[indexArr].url}/>
- </div>
- }
- const OneCat = ({cat=oneCat}) =>
- <div>
- <h1>{cat.name}</h1>
- <div>{cat.goods.map(el=><GoodCard good={el}/>)}</div>
- </div>
- ///////////////Timer
- const Timer = ({countSeconds}) => {
- const [time, setTime] = useState(countSeconds)
- const [startTimer, setStartTimer] = useState(false)
- const [timerId, setTimerId] = useState(0)
- useEffect(() => {
- let intervalId = null
- if(startTimer){
- intervalId = setInterval(() => setTime(count => count -1), 1000)
- setTimerId(intervalId)
- }else{
- clearInterval(timerId)
- }
- },[startTimer])
- useEffect(() => {
- if(time===0){
- clearInterval(timerId)
- }
- },[time===0])
- let hours = Math.floor(time/60/60)
- let minutes = Math.floor(time/60)-(hours*60)
- let sec = time % 60
- return (
- <>
- <div>{hours}:{minutes}:{sec}</div>
- <button onClick={()=>setStartTimer(true) }>Start</button>
- <button onClick={()=>setStartTimer(false) }>Stop</button>
- </>
- )
- }
- const TimerControl = ()=>{
- const [hours, setHours] = useState('')
- const [minutes, setMinutes] = useState('')
- const [seconds, setSeconds] = useState('')
- const [start, setStart] = useState(false)
- return (
- <>
- <input
- className="inputTime"
- value={hours}
- onChange={e => setHours(e.target.value)}
- type="number"
- placeholder='hours'></input>
- <input
- className="inputTime"
- value={minutes}
- onChange={e => setMinutes(e.target.value)}
- type="number"
- placeholder='minutes'></input>
- <input
- className="inputTime"
- value={seconds}
- onChange={e => setSeconds(e.target.value)}
- type="number"
- placeholder='seconds'></input><br/>
- <button onClick={() => setStart(!start)}>Set time</button>
- {start && <Timer countSeconds={hours*60*6 + minutes*6 + seconds}/>}
- </>
- )
- }
- const TimerContainer = ({seconds, refresh, render}) => {
- const [sec, setSec] = useState(seconds);
- useEffect(() => {
- if(sec > 0){
- const intervalId = setInterval(()=>{setSec(sec=> sec-1)},refresh)
- return () => {
- clearInterval(intervalId);
- }
- }
- },[sec]);
- const Render = render;
- return (<Render seconds={sec} />)
- }
- const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>
- function App() {
- return (
- <div className="App">
- <TimerContainer seconds={1800} refresh={1000} render={Watch}/>
- <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
- <TimerControl/>
-
- <Spoiler header={<h1>Заголовок</h1>} open>
- Контент 1
- <p>
- лорем ипсум траливали и тп.
- </p>
- </Spoiler>
- <Spoiler>
- <h2>Контент 2</h2>
- <p>
- лорем ипсум траливали и тп.
- </p>
- </Spoiler>
- <div>Задание RangeInput</div>
- <RangeInput min={2} max={10} />
- <div>Задание LoginForm</div>
- <LoginForm onLogin={({login, password}) => console.log('ЛОГИН И ПАРОЛЬ', login, password)}/>
- <div>Задание PasswordConfirm </div>
- <PasswordConfirm min={6} />
- <OneCat/>
-
- </div>
- );
- }
- export default App;
|