forth lesson

src/App.js

@@ -2,131 +2,90 @@ import {useState} from 'react';
 import logo from './logo.svg';
 import './App.scss';
 
-const capitalize = (name) =>        
-                                    name.length > 0 ?
-name[0].toUpperCase() + name.slice(1).toLowerCase() : ''
-                                
+const Avatar = ({image="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png"}) => 
+<img className='Avatar' src={image}/>
 
-const CapitalizedInput = ({...props}) => {
-    const [value, setValue] = useState('')
-
-    return (
-        <input type='text' onChange={e => setValue(capitalize(e.target.value))}
-                           value={value} {...props}/>
-    )
-}
+const PasswordInput = ({minLength=4, goodLength=10}) => {
+    const [password, setPassword] = useState('')
 
-const Sum = () => {
-    const [a, setA] = useState(0)
-    const [b, setB] = useState(0)
+    //wrongPassword, sosoPassword, goodPassword
+    const className = password.length < minLength ? 'wrongPassword' : 
+                      (password.length < goodLength ? 'sosoPassword' : 'goodPassword')
 
     return (
-        <>
-            <input type='number' onChange={e => setA(+e.target.value)}
-                                 value={a} />
-            <input type='number' onChange={e => setB(+e.target.value)}
-                                 value={b} />
-            <h2>{a+b}</h2>
-            <h2>{a-b}</h2>
-            <h2>{a*b}</h2>
-            <h2>{a/b}</h2>
-        </>
+        <input type='password'
+               value={password}
+               onChange={e => setPassword(e.target.value)} 
+               className={className}
+               />
     )
 }
 
-
-let channelToHex = channel => 
-                      channel > 15 ?
-channel.toString(16).toUpperCase() : '0' + channel.toString(16).toUpperCase()
-
-const ColorPicker = () => {
-    const [r, setR] = useState(0)
-    const [g, setG] = useState(0)
-    const [b, setB] = useState(0)
-
-
-    const style = {
-        backgroundColor: `rgb(${r}, ${g}, ${b})`,
-        color: `rgb(${255 - r}, ${255 - g}, ${255 - b})`,
-        color: `rgb(${(r + 128) % 256}, ${(g + 128) % 256}, ${(b + 128) % 256})`
-    }
-
-    const hexColor = `#${channelToHex(r)}${channelToHex(g)}${channelToHex(b)}`
-    console.log(r, g, b, hexColor)
-
-
-    return (
-        <>
-            <div style={style}>
-                <input type='number' onChange={e => setR(+e.target.value)}
-                                     value={r} min={0} max={255}/>
-                <input type='number' onChange={e => setG(+e.target.value)}
-                                     value={g} min={0} max={255}/>
-                <input type='number' onChange={e => setB(+e.target.value)}
-                                     value={b} min={0} max={255}/>
-                <span>{style.backgroundColor}</span>
-                <span>{hexColor}</span>
-                <span>{style.color}</span>
-            </div>
-        </>
-    )
+const testUser = {
+    //name: 'Vasya',
+    //fatherName: 'Ivanovich',
+    surname: 'Petrov',
+    age: 22
 }
 
-const ViewablePassword = ({}) => {
-    //добавьте нужные состояния, для того что бы прикрутить к паролю чекбокс,
-    //который дает "глаз" просмотра пароля. Что бы пароль был закрытый, поменяйте его
-    //тип с "text" на "password" и наоборот для открытия.
+const AdultContent = () =>
+<div>
+    <h1>БАННЕР С ПИВАСОМ</h1>
+</div>
+
+const HelloUserBanner = ({user}) =>  {
+    //const showBanner = user.age && user.age > 18
+    //let showBanner = false
+    //if (user.age && user.age > 18){
+        //showBanner = true
+    //}
     return (
-        <>
-            <input type="?????"/>
-            <input type="checkbox"/>
-        </>
-    )
+    <div>
+        {user.name && <span className='UserName'>{user.name}</span>}
+        {user.fatherName && <span className='UserFathername'>{user.fatherName}</span> }
+        {user.surname && <span className='UserSurname'>{user.surname}</span>}
+        {user.age && user.age > 18 && <AdultContent />}
+    </div> )
 }
 
 
-const PasswordConfirm = ({minLength=8}) => { 
-    //пара инпутов для подтверждения пароля при регистрации/смене пароля. 
-    //Для успеха они должны совпадать;
-    const [password, setPassword] = useState('')
-    const [passwordConfirm, setPasswordConfirm] = useState('')
+const HelloUserBannerOr = ({user}) => 
+<div>
+    <span className='UserName'>{user.name || 'Anonymous'}</span>
+    <span className='UserFathername'>{user.fatherName || 'Anonymovich'}</span> 
+    <span className='UserSurname'>{user.surname || 'Anonimov'}</span>
+</div>
 
-    const passwordOk = 'УСЛОВИЕ' //результатом должен быть false или true
-    //На месте условия напишите (поэтапно, насколько сможете):
-    // - для начала условие равенства или неравенства паролей
-    // - проверка что пароли не короче minLength
-    // - проверка на наличие цифр в пароле для большей безопасности
-    // - проверка на наличие букв разных размеров
-    // условия объединяются через `&&` (логическое И)
-    const className  = passwordOk ? 'passwordOk' : 'passwordWrong'
-    //Предусмотрите  разные классы в scss для визуализации.
 
-    return ( //прикрутите сюда кнопку 'сменить пароль', которая становится disabled если passwordOk "не ОК"
-        <>
-            <input type='password' 
-                    value={password} 
-                    onChange={e => setPassword(e.target.value)} 
-                    className={className}
-                    />
-            <input type='password' 
-                    value={passwordConfirm} 
-                    onChange={e => setPasswordConfirm(e.target.value)} 
-                    className={className}
-                    />
-        </>
+const Accordion3 = ({content1, content2, content3, header1, header2, header3}) => {
+    const [opened, setOpened] = useState(false)
+    console.log(opened)
+    return (
+        <div>
+            <h2 onClick={() => setOpened(1)}>{header1}</h2>
+            {opened === 1 && content1}
+            <h2 onClick={() => setOpened(2)}>{header2}</h2>
+            {opened === 2 && content2}
+            <h2 onClick={() => setOpened(3)}>{header3}</h2>
+            {opened === 3 && content3}
+        </div>
     )
 }
 
 
-//<CapitalizedInput className="input_class" 
-                    //id="super_id"/><br/>
-//<Sum />
-//<input type='color' />
-
 const App = () => 
 <>
-    <PasswordConfirm />
-    <ViewablePassword />
+    { /*   <Avatar image="http://www.smileexpo.ru/public/upload/news/tn_10_faktov_ob_eynshteyne_kotorih_vi_ne_znali_14458667137751_image.jpg"/>
+    <Avatar />
+    <PasswordInput />
+    <HelloUserBanner user={testUser} /> */ }
+    <Accordion3 header1="первый" 
+                header2="второй"
+                header3="третий" 
+                content1={<div>ПЕРВЫЙ КОНТЕНТ</div>}
+                content2="просто строка без верстки"
+                content3={<input placeholder="ТРЕТИЙ КОНТЕНТ"/>}
+                />
 </>
 
 export default App;