ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2025-12-18 04:39:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

hw3 + hw4

Browse Source
This commit is contained in:
Andres
2022-06-25 15:02:56 +02:00
parent dcc5cf08a7
commit 3d2935896f
15 changed files with 192 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/s1-main/App.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react' import React from 'react'
import HW2 from '../s2-homeworks/hw02/HW2' import HW2 from '../s2-homeworks/hw02/HW2'
import HW3 from '../s2-homeworks/hw03/HW3'
import HW4 from '../s2-homeworks/hw04/HW4'
import s from './App.module.css' import s from './App.module.css'
import HW1 from '../s2-homeworks/hw01/HW1' import HW1 from '../s2-homeworks/hw01/HW1'
// import HW2 from '../s2-homeworks/hw02/HW2' // import HW2 from '../s2-homeworks/hw02/HW2'
@@ -19,9 +21,9 @@ const App = () => {
{/*<div>react homeworks:</div>*/} {/*<div>react homeworks:</div>*/}
{/*<HW1/>*/} {/*<HW1/>*/}
<HW2/> {/*<HW2/>*/}
{/*<HW3/>*/} {/*<HW3/>*/}
{/*<HW4/>*/} <HW4/>
{/*<HW5/>*/} {/*<HW5/>*/}
</div> </div>

2
src/s2-homeworks/hw01/HW1.tsx
View File

@@ -57,7 +57,7 @@ const HW1 = () => {
{/*<hr/>*/} {/*<hr/>*/}
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
{/*<hr/>*/} <hr />
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
</div> </div>
) )

12
src/s2-homeworks/hw02/HW2.tsx
View File

@@ -24,11 +24,11 @@ const defaultAffairs: any = [ // need to fix any // AffairType[]
// pure helper functions // pure helper functions
export const filterAffairs = (affairs: any, filter: any): any => { // need to fix any // (affairs: AffairType[], filter: FilterType): AffairType[] export const filterAffairs = (affairs: any, filter: any): any => { // need to fix any // (affairs: AffairType[], filter: FilterType): AffairType[]
if (filter === 'all') return affairs // создаёт студент if (filter === 'all') return affairs // создаёт студент
// else if (filter === 'low') return affairs.filter(a => a.priority === 'low') // else if (filter === 'low') return affairs.filter(a => a.priority === 'low')
// else if (filter === 'middle') return affairs.filter(a => a.priority === 'middle') // else if (filter === 'middle') return affairs.filter(a => a.priority === 'middle')
// else if (filter === 'high') return affairs.filter(a => a.priority === 'high') // else if (filter === 'high') return affairs.filter(a => a.priority === 'high')
// else { // else {
// } // }
// return [] // return []
else return affairs.filter((a: any) => a.priority === filter) // need to fix // создаёт студент else return affairs.filter((a: any) => a.priority === filter) // need to fix // создаёт студент
} }
@@ -44,7 +44,7 @@ function HW2() {
const deleteAffairCallback = (_id: any) => setAffairs(deleteAffair(affairs, _id)) // need to fix any // number const deleteAffairCallback = (_id: any) => setAffairs(deleteAffair(affairs, _id)) // need to fix any // number
return ( return (
<div id={'hw2'} className={s2.hw}> <div id={'hw2'} className={s2.hw} style={{marginTop: '39px'}}>
{/*<hr/>*/} {/*<hr/>*/}
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}

69
src/s2-homeworks/hw03/Greeting.module.css
View File

@@ -1,61 +1,80 @@
.greetingForm { .greetingForm {
display: flex; display: flex;
align-items: center; flex-direction: column;
padding: 31px 0 0 70px;
height: 336px;
}
.inputAndButtonContainer {
display: flex;
gap: 24px;
margin-bottom: 22px;
} }
.error { .error {
position: absolute; position: absolute;
color: red; color: red;
margin-left: 10px; margin-left: 14px;
margin-top: -14px; margin-top: -28px;
} }
.input { .input {
margin: 10px; border: 1px solid #d1d1d1;
border-radius: 5px;
background: #003300; width: 370px;
color: #99ff99; font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
padding: 8px 0 8px 12px;
color: #000;
} }
.input:focus { .input:focus {
outline: none; outline: none;
border: #99ff99 solid 2px; border: 1px solid #06c;
} }
.errorInput { .errorInput {
margin: 10px; border: 1px solid red;
background: #003300;
color: #99ff99;
border: 2px solid red;
outline: none;
} }
.button { .button {
margin: 10px; margin-left: 12px;
width: 60px; background: #06c;
color: white;
background: #003300; border: none;
color: #99ff99; border-radius: 15px;
outline: none; outline: none;
padding: 8px 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
cursor: pointer;
} }
.button:focus { .button:focus {
outline: #99ff99 solid 1px;
} }
.button:active { .button:active {
background: #99ff99;
} }
.button:disabled { .button:disabled {
color: #005500; opacity: 0.6;
cursor: default;
} }
.count { .count {
margin: 10px; font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 17px;
margin-bottom: 9px;
} }
.greeting { .greeting {
margin-left: 10px;
} }

32
src/s2-homeworks/hw03/Greeting.tsx
View File

@@ -1,4 +1,4 @@
import React, {ChangeEvent, KeyboardEvent} from 'react' import React, { ChangeEvent, KeyboardEvent } from 'react'
import s from './Greeting.module.css' import s from './Greeting.module.css'
type GreetingPropsType = { type GreetingPropsType = {
@@ -16,24 +16,28 @@ type GreetingPropsType = {
const Greeting: React.FC<GreetingPropsType> = ( const Greeting: React.FC<GreetingPropsType> = (
{name, setNameCallback, addUser, onEnter, error, totalUsers, lastUser, onBlur} // деструктуризация пропсов {name, setNameCallback, addUser, onEnter, error, totalUsers, lastUser, onBlur} // деструктуризация пропсов
) => { ) => {
const inputClass = error ? s.errorInput : s.input // need to fix with (?:) const inputClass = error ? `${s.input} ${s.errorInput}` : s.input // need to fix with (?:)
return ( return (
<div id={'hw3-form'} className={s.greetingForm}> <div id={'hw3-form'} className={s.greetingForm}>
<div> <div id={'hw3-users-total'} className={s.count}>{totalUsers}</div>
<input <div className={s.inputAndButtonContainer}>
id={'hw3-input'} <div>
value={name} <input
onChange={setNameCallback} id={'hw3-input'}
className={inputClass} value={name}
onKeyDown={onEnter} onChange={setNameCallback}
onBlur={onBlur} className={inputClass}
/> onKeyDown={onEnter}
<div id={'hw3-error'} className={s.error}>{error}</div> onBlur={onBlur}
/>
<div id={'hw3-error'} className={s.error}>{error}</div>
</div>
<button id={'hw3-button'} onClick={addUser} className={s.button} disabled={!name}>add</button>
</div> </div>
<button id={'hw3-button'} onClick={addUser} className={s.button} disabled={!name}>add</button>
<div id={'hw3-users-total'} className={s.count}>{totalUsers}</div>
{lastUser && ( {lastUser && (
<div className={s.greeting}> <div className={s.greeting}>
hello{' '} hello{' '}

8
src/s2-homeworks/hw03/GreetingContainer.tsx
View File

@@ -1,6 +1,6 @@
import React, {ChangeEvent, KeyboardEvent, useState} from 'react' import React, { ChangeEvent, KeyboardEvent, useState } from 'react'
import Greeting from './Greeting' import Greeting from './Greeting'
import {UserType} from './HW3' import { UserType } from './HW3'
type GreetingContainerPropsType = { type GreetingContainerPropsType = {
users: UserType[] // need to fix any users: UserType[] // need to fix any
@@ -28,7 +28,7 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser
const trimmedName = name.trim() const trimmedName = name.trim()
if (!trimmedName) { if (!trimmedName) {
setError('name is require!') setError('name is required!')
} }
setName(trimmedName) // need to fix setName(trimmedName) // need to fix
} }
@@ -39,7 +39,7 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser
if (!trimmedName) { if (!trimmedName) {
setName('') setName('')
setError('name is require!') setError('name is required!')
} else { } else {
addUserCallback(trimmedName) addUserCallback(trimmedName)
setName('') setName('')

11
src/s2-homeworks/hw03/HW3.tsx
View File

@@ -1,5 +1,5 @@
import React, {useState} from 'react' import React, { useState } from 'react'
import {v1} from 'uuid' import { v1 } from 'uuid'
import s from './Greeting.module.css' import s from './Greeting.module.css'
import s2 from '../../s1-main/App.module.css' import s2 from '../../s1-main/App.module.css'
import GreetingContainer from './GreetingContainer' import GreetingContainer from './GreetingContainer'
@@ -23,16 +23,17 @@ const HW3 = () => {
return ( return (
<div id={'hw3'} className={s2.hw}> <div id={'hw3'} className={s2.hw}>
<hr/> {/*<hr/>*/}
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
<div className={s2.hwTitle}>homeworks 3</div> <div className={s2.hwTitle}>Homework #3</div>
{/*для автоматической проверки дз (не менять)*/} {/*для автоматической проверки дз (не менять)*/}
<GreetingContainer users={users} addUserCallback={addUserCallback}/>
<hr/> <hr/>
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
<GreetingContainer users={users} addUserCallback={addUserCallback}/>
<hr/> <hr/>
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
</div> </div>

9
src/s2-homeworks/hw04/HW4.tsx
View File

@@ -5,18 +5,17 @@ import Stand from './Stand'
const HW4 = () => { const HW4 = () => {
return ( return (
<div id={'hw4'} className={s2.hw}> <div id={'hw4'} className={s2.hw}>
<hr/>
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
<div className={s2.hwTitle}>homeworks 4</div> <div className={s2.hwTitle}>Homework #4</div>
<hr/>
{/*проверка отображения*/} {/*проверка отображения*/}
демострация возможностей компонент: {/*демонстрация возможностей компонент:*/}
<Stand/> <Stand/>
<hr/> <hr/>
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
<hr/> {/*<hr/>*/}
{/*можно убрать этот тег*/} {/*можно убрать этот тег*/}
</div> </div>
) )

17
src/s2-homeworks/hw04/Stand.module.css
View File

@@ -1,16 +1,25 @@
.stand { .stand {
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
height: 336px;
align-items: center;
padding: 0 70px;
} }
.inputs { .inputs {
display: flex;
flex-direction: column;
gap: 48px;
} }
.buttons { .buttons {
display: flex;
flex-direction: column;
gap: 24px;
} }
.checkboxes { .checkboxes {
display: flex;
flex-direction: column;
gap: 36px;
} }

14
src/s2-homeworks/hw04/Stand.tsx
View File

@@ -13,7 +13,7 @@ const Stand = () => {
return ( return (
<div id={'hw4-stand'} className={s.stand}> <div id={'hw4-stand'} className={s.stand}>
<div className={s.inputs}> <div className={s.inputs}>
инпут с ошибкой: {/*инпут с ошибкой:*/}
<div> <div>
<SuperInputText <SuperInputText
id={'hw4-super-input-with-error'} id={'hw4-super-input-with-error'}
@@ -26,7 +26,7 @@ const Stand = () => {
}} }}
/> />
</div> </div>
совместим со старым кодом {/*совместим со старым кодом*/}
<div> <div>
<SuperInputText <SuperInputText
id={'hw4-super-input-like-old'} id={'hw4-super-input-like-old'}
@@ -37,15 +37,15 @@ const Stand = () => {
</div> </div>
<div className={s.buttons}> <div className={s.buttons}>
обычная кнопка: {/*обычная кнопка:*/}
<div> <div>
<SuperButton id={'hw4-super-button-default'}>default</SuperButton> <SuperButton id={'hw4-super-button-default'}>default</SuperButton>
</div> </div>
красная кнопка: {/*красная кнопка:*/}
<div> <div>
<SuperButton id={'hw4-super-button-red'} xType={'red'}>red</SuperButton> <SuperButton id={'hw4-super-button-red'} xType={'red'}>red</SuperButton>
</div> </div>
задизэйбленная кнопка: {/*задизэйбленная кнопка:*/}
<div> <div>
<SuperButton id={'hw4-super-button-disabled'} xType={'red'} disabled>disabled</SuperButton> <SuperButton id={'hw4-super-button-disabled'} xType={'red'} disabled>disabled</SuperButton>
</div> </div>
@@ -53,7 +53,7 @@ const Stand = () => {
</div> </div>
<div className={s.checkboxes}> <div className={s.checkboxes}>
чекбокс с текстом: {/*чекбокс с текстом:*/}
<div> <div>
<SuperCheckbox <SuperCheckbox
id={'hw4-super-checkbox-with-text'} id={'hw4-super-checkbox-with-text'}
@@ -63,7 +63,7 @@ const Stand = () => {
some text some text
</SuperCheckbox> </SuperCheckbox>
</div> </div>
совместим со старым кодом {/*совместим со старым кодом*/}
<div> <div>
<SuperCheckbox <SuperCheckbox
id={'hw4-super-checkbox-like-old'} id={'hw4-super-checkbox-like-old'}

46
src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
View File

@@ -1,26 +1,42 @@
.input:focus { .input:focus {
outline: none; border: 1px solid #06c;
border: #99ff99 solid 2px;
} }
.superInput { .errorInput:focus {
margin: 10px; border: 1px solid #cc1439;
}
background: #003300; .input {
color: #99ff99; border: 1px solid #d1d1d1;
border-radius: 5px;
width: 370px;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
padding: 8px 0 8px 12px;
color: #000;
outline: none;
}
.inputWrapper {
position: relative;
} }
.errorInput { .errorInput {
margin: 10px; border: 1px solid #cc1439;
background: #003300;
color: #99ff99;
border: 2px solid #dd3355;
} }
.error { .error {
color: #dd3355; font-family: 'Montserrat', sans-serif;
height: 21px; font-style: normal;
margin-left: 10px; font-weight: 400;
font-size: 10px;
line-height: 12px;
color: #cc1439;
position: absolute;
top: -17px;
left: 0;
} }

8
src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
View File

@@ -1,4 +1,4 @@
import React, {ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, KeyboardEvent, ReactNode} from 'react' import React, { ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, KeyboardEvent, ReactNode } from 'react'
import s from './SuperInputText.module.css' import s from './SuperInputText.module.css'
// тип пропсов обычного инпута // тип пропсов обычного инпута
@@ -41,7 +41,7 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = (
const finalInputClassName = `${s.input} ${error ? s.errorInput : s.superInput} ${className}` // задача на смешивание классов const finalInputClassName = `${s.input} ${error ? s.errorInput : s.superInput} ${className}` // задача на смешивание классов
return ( return (
<> <div className={s.inputWrapper}>
<input <input
id={id} id={id}
type={'text'} type={'text'}
@@ -51,8 +51,8 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = (
{...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри) {...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри)
/> />
<span id={id ? id + '-span' : undefined} className={finalSpanClassName}>{error}</span> <span id={id ? id + '-span' : undefined} className={finalSpanClassName}>{error}</span>
</> </div>
) )
} }

43
src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
View File

@@ -8,24 +8,30 @@
} }
.default { .default {
background: #003300; background: #06c;
color: #99ff99;
outline: none;
} }
.red { .red {
background: #dd3355; background: #cc1439;
} }
.disabled { .disabled {
color: #005500; background: #004d99;
opacity: 0.5;
} }
.button { .button {
position: relative; position: relative;
margin: 10px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
border-radius: 15px;
border: none;
color: white;
padding: 5px 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
} }
.button::after { .button::after {
@@ -40,7 +46,7 @@
transform: skew(45deg); transform: skew(45deg);
background-color: #ffffff; background-color: #fff;
opacity: 0.7; opacity: 0.7;
z-index: 14; z-index: 14;
@@ -60,19 +66,30 @@
height: 100vh; height: 100vh;
width: 300vw; width: 300vw;
background-color: #ffffff; background-color: #fff;
opacity: 0.2; opacity: 0.2;
z-index: 7; z-index: 7;
} }
.button:focus { .default:hover {
outline: #99ff99 solid 1px; background: #0080ff;
} }
.button:active { .red:hover {
background: #99ff99; background: #ff1a47;
color: #003300; }
.button:focus {
}
.default:active {
background: #0059b3;
}
.red:active {
background: #b31232;
} }
.button:disabled { .button:disabled {

32
src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css
View File

@@ -8,35 +8,37 @@
/*input[type="checkbox"] - no*/ /*input[type="checkbox"] - no*/
.checkbox { .checkbox {
appearance: none; /*Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции. appearance: none;
Если задать значение none, то чекбокс пропадет, но по нему, тем не менее, /*Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции.
можно щелкать и состояние чекбокса будет меняться*/ Если задать значение none, то чекбокс пропадет, но по нему, тем не менее,
можно щелкать и состояние чекбокса будет меняться*/
width: 20px; width: 18px;
height: 20px; height: 18px;
/*background-repeat: no-repeat;*/ background-repeat: no-repeat;
/*background-position: center center;*/ background-position: center center;
/*background-size: 90% 90%;*/ /* background-size: 90% 90%; */
/*vertical-align: middle;*/ vertical-align: middle;
margin-right: 10px; margin-right: 8px;
border-radius: 3px;
background: #335533; border: 2px solid #06c;
cursor: pointer; cursor: pointer;
} }
.checkbox:checked { .checkbox:checked {
appearance: none; appearance: none;
background-image: url("checked.png"); background-image: url("checked.svg");
/*background: #99ff99;*/ /*background: #99ff99;*/
} }
.checkbox:focus { .checkbox:focus {
outline: #99ff99 solid 1px; border-color: #0059b3;
} }
.spanClassName { .spanClassName {
font-family: 'Montserrat', sans-serif;
color: #06c;
} }

3
src/s2-homeworks/hw04/common/c3-SuperCheckbox/checked.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.70019 1.38993L3.92019 6.38993L2.29019 4.27993C2.12708 4.07041 1.88742 3.93427 1.62393 3.90145C1.36044 3.86863 1.09471 3.94182 0.885189 4.10493C0.675668 4.26804 0.539523 4.5077 0.506704 4.77119C0.473885 5.03468 0.547081 5.30041 0.710189 5.50993L3.14019 8.61993C3.23436 8.73911 3.35445 8.83527 3.49133 8.90111C3.62821 8.96696 3.7783 9.00075 3.93019 8.99993C4.08291 8.99957 4.23351 8.96422 4.37045 8.89662C4.50739 8.82902 4.62703 8.73095 4.72019 8.60993L9.29019 2.60993C9.45197 2.39776 9.52284 2.13001 9.48721 1.86558C9.45158 1.60116 9.31236 1.36171 9.10019 1.19993C8.88802 1.03815 8.62027 0.96728 8.35584 1.00291C8.09141 1.03854 7.85197 1.17776 7.69019 1.38993H7.70019Z" fill="#0066CC"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 799 B