hw3 + hw4

2025-12-16 20:39:24 +00:00 · 2022-06-25 15:02:56 +02:00
parent dcc5cf08a7
commit 3d2935896f
15 changed files with 192 additions and 120 deletions
--- a/src/s1-main/App.tsx
+++ b/src/s1-main/App.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 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 HW1 from '../s2-homeworks/hw01/HW1'
 // import HW2 from '../s2-homeworks/hw02/HW2'
@@ -19,9 +21,9 @@ const App = () => {
            {/*<div>react homeworks:</div>*/}

            {/*<HW1/>*/}
-            <HW2/>
+            {/*<HW2/>*/}
            {/*<HW3/>*/}
-            {/*<HW4/>*/}
+            <HW4/>

            {/*<HW5/>*/}
        </div>
--- a/src/s2-homeworks/hw01/HW1.tsx
+++ b/src/s2-homeworks/hw01/HW1.tsx
@@ -57,7 +57,7 @@ const HW1 = () => {

            {/*<hr/>*/}
            {/*можно убрать этот тег*/}
-            {/*<hr/>*/}
+            <hr />
            {/*можно убрать этот тег*/}
        </div>
    )
--- a/src/s2-homeworks/hw02/HW2.tsx
+++ b/src/s2-homeworks/hw02/HW2.tsx
@@ -24,11 +24,11 @@ const defaultAffairs: any = [ // need to fix any // AffairType[]
 // pure helper functions
 export const filterAffairs = (affairs: any, filter: any): any => { // need to fix any // (affairs: AffairType[], filter: FilterType): AffairType[]
    if (filter === 'all') return affairs // создаёт студент
-    // 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 === 'high') return affairs.filter(a => a.priority === 'high')
-    // else {
-    // }
+        // 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 === 'high') return affairs.filter(a => a.priority === 'high')
+        // else {
+        // }
    // return []
    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

    return (
-        <div id={'hw2'} className={s2.hw}>
+        <div id={'hw2'} className={s2.hw} style={{marginTop: '39px'}}>
            {/*<hr/>*/}
            {/*можно убрать этот тег*/}

--- a/src/s2-homeworks/hw03/Greeting.module.css
+++ b/src/s2-homeworks/hw03/Greeting.module.css
@@ -1,61 +1,80 @@
 .greetingForm {
    display: flex;
-    align-items: center;
+    flex-direction: column;
+    padding: 31px 0 0 70px;
+    height: 336px;
+}
+
+.inputAndButtonContainer {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 22px;
 }

 .error {
    position: absolute;
    color: red;
-    margin-left: 10px;
-    margin-top: -14px;
+    margin-left: 14px;
+    margin-top: -28px;
 }

 .input {
-    margin: 10px;
-
-    background: #003300;
-    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;
 }

 .input:focus {
    outline: none;
-    border: #99ff99 solid 2px;
+    border: 1px solid #06c;
 }

 .errorInput {
-    margin: 10px;
-
-    background: #003300;
-    color: #99ff99;
-
-    border: 2px solid red;
-    outline: none;
+    border: 1px solid red;
 }

 .button {
-    margin: 10px;
-    width: 60px;
-
-    background: #003300;
-    color: #99ff99;
+    margin-left: 12px;
+    background: #06c;
+    color: white;
+    border: none;
+    border-radius: 15px;
    outline: none;
+    padding: 8px 24px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
 }
+
 .button:focus {
-    outline: #99ff99 solid 1px;
+
 }

 .button:active {
-    background: #99ff99;
+
 }

 .button:disabled {
-    color: #005500;
+    opacity: 0.6;
+    cursor: default;
 }

 .count {
-    margin: 10px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 17px;
+    margin-bottom: 9px;
 }

 .greeting {
-    margin-left: 10px;
 }
--- a/src/s2-homeworks/hw03/Greeting.tsx
+++ b/src/s2-homeworks/hw03/Greeting.tsx
@@ -1,4 +1,4 @@
-import React, {ChangeEvent, KeyboardEvent} from 'react'
+import React, { ChangeEvent, KeyboardEvent } from 'react'
 import s from './Greeting.module.css'

 type GreetingPropsType = {
@@ -16,24 +16,28 @@ type GreetingPropsType = {
 const Greeting: React.FC<GreetingPropsType> = (
    {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 (
        <div id={'hw3-form'} className={s.greetingForm}>
-            <div>
-                <input
-                    id={'hw3-input'}
-                    value={name}
-                    onChange={setNameCallback}
-                    className={inputClass}
-                    onKeyDown={onEnter}
-                    onBlur={onBlur}
-                />
-                <div id={'hw3-error'} className={s.error}>{error}</div>
+            <div id={'hw3-users-total'} className={s.count}>{totalUsers}</div>
+            <div className={s.inputAndButtonContainer}>
+                <div>
+                    <input
+                        id={'hw3-input'}
+                        value={name}
+                        onChange={setNameCallback}
+                        className={inputClass}
+                        onKeyDown={onEnter}
+                        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>

-            <button id={'hw3-button'} onClick={addUser} className={s.button} disabled={!name}>add</button>
-            <div id={'hw3-users-total'} className={s.count}>{totalUsers}</div>
            {lastUser && (
                <div className={s.greeting}>
                    hello{' '}
--- a/src/s2-homeworks/hw03/GreetingContainer.tsx
+++ b/src/s2-homeworks/hw03/GreetingContainer.tsx
@@ -1,6 +1,6 @@
-import React, {ChangeEvent, KeyboardEvent, useState} from 'react'
+import React, { ChangeEvent, KeyboardEvent, useState } from 'react'
 import Greeting from './Greeting'
-import {UserType} from './HW3'
+import { UserType } from './HW3'

 type GreetingContainerPropsType = {
    users: UserType[] // need to fix any
@@ -28,7 +28,7 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser
        const trimmedName = name.trim()

        if (!trimmedName) {
-            setError('name is require!')
+            setError('name is required!')
        }
        setName(trimmedName) // need to fix
    }
@@ -39,7 +39,7 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser

            if (!trimmedName) {
                setName('')
-                setError('name is require!')
+                setError('name is required!')
            } else {
                addUserCallback(trimmedName)
                setName('')
--- a/src/s2-homeworks/hw03/HW3.tsx
+++ b/src/s2-homeworks/hw03/HW3.tsx
@@ -1,5 +1,5 @@
-import React, {useState} from 'react'
-import {v1} from 'uuid'
+import React, { useState } from 'react'
+import { v1 } from 'uuid'
 import s from './Greeting.module.css'
 import s2 from '../../s1-main/App.module.css'
 import GreetingContainer from './GreetingContainer'
@@ -23,16 +23,17 @@ const HW3 = () => {

    return (
        <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/>
            {/*можно убрать этот тег*/}
+            <GreetingContainer users={users} addUserCallback={addUserCallback}/>
            <hr/>
            {/*можно убрать этот тег*/}
        </div>
--- a/src/s2-homeworks/hw04/HW4.tsx
+++ b/src/s2-homeworks/hw04/HW4.tsx
@@ -5,18 +5,17 @@ import Stand from './Stand'
 const HW4 = () => {
    return (
        <div id={'hw4'} className={s2.hw}>
-            <hr/>
            {/*можно убрать этот тег*/}

-            <div className={s2.hwTitle}>homeworks 4</div>
-
+            <div className={s2.hwTitle}>Homework #4</div>
+            <hr/>
            {/*проверка отображения*/}
-            демострация возможностей компонент:
+            {/*демонстрация возможностей компонент:*/}
            <Stand/>

            <hr/>
            {/*можно убрать этот тег*/}
-            <hr/>
+            {/*<hr/>*/}
            {/*можно убрать этот тег*/}
        </div>
    )
--- a/src/s2-homeworks/hw04/Stand.module.css
+++ b/src/s2-homeworks/hw04/Stand.module.css
@@ -1,16 +1,25 @@
 .stand {
    display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
+    height: 336px;
+    align-items: center;
+    padding: 0 70px;
 }

 .inputs {
-
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
 }

 .buttons {
-
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 }

 .checkboxes {
-
+    display: flex;
+    flex-direction: column;
+    gap: 36px;
 }
--- a/src/s2-homeworks/hw04/Stand.tsx
+++ b/src/s2-homeworks/hw04/Stand.tsx
@@ -13,7 +13,7 @@ const Stand = () => {
    return (
        <div id={'hw4-stand'} className={s.stand}>
            <div className={s.inputs}>
-                инпут с ошибкой:
+                {/*инпут с ошибкой:*/}
                <div>
                    <SuperInputText
                        id={'hw4-super-input-with-error'}
@@ -26,7 +26,7 @@ const Stand = () => {
                        }}
                    />
                </div>
-                совместим со старым кодом
+                {/*совместим со старым кодом*/}
                <div>
                    <SuperInputText
                        id={'hw4-super-input-like-old'}
@@ -37,15 +37,15 @@ const Stand = () => {
            </div>

            <div className={s.buttons}>
-                обычная кнопка:
+                {/*обычная кнопка:*/}
                <div>
                    <SuperButton id={'hw4-super-button-default'}>default</SuperButton>
                </div>
-                красная кнопка:
+                {/*красная кнопка:*/}
                <div>
                    <SuperButton id={'hw4-super-button-red'} xType={'red'}>red</SuperButton>
                </div>
-                задизэйбленная кнопка:
+                {/*задизэйбленная кнопка:*/}
                <div>
                    <SuperButton id={'hw4-super-button-disabled'} xType={'red'} disabled>disabled</SuperButton>
                </div>
@@ -53,7 +53,7 @@ const Stand = () => {
            </div>

            <div className={s.checkboxes}>
-                чекбокс с текстом:
+                {/*чекбокс с текстом:*/}
                <div>
                    <SuperCheckbox
                        id={'hw4-super-checkbox-with-text'}
@@ -63,7 +63,7 @@ const Stand = () => {
                        some text
                    </SuperCheckbox>
                </div>
-                совместим со старым кодом
+                {/*совместим со старым кодом*/}
                <div>
                    <SuperCheckbox
                        id={'hw4-super-checkbox-like-old'}
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
@@ -1,26 +1,42 @@
+
 .input:focus {
-    outline: none;
-    border: #99ff99 solid 2px;
+    border: 1px solid #06c;
 }

-.superInput {
-    margin: 10px;
+.errorInput:focus {
+    border: 1px solid #cc1439;
+}

-    background: #003300;
-    color: #99ff99;
+.input {
+    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 {
-    margin: 10px;
-
-    background: #003300;
-    color: #99ff99;
-
-    border: 2px solid #dd3355;
+    border: 1px solid #cc1439;
 }

 .error {
-    color: #dd3355;
-    height: 21px;
-    margin-left: 10px;
+    font-family: 'Montserrat', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    color: #cc1439;
+    position: absolute;
+    top: -17px;
+    left: 0;
 }
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
@@ -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'

 // тип пропсов обычного инпута
@@ -41,7 +41,7 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = (
    const finalInputClassName = `${s.input} ${error ? s.errorInput : s.superInput} ${className}` // задача на смешивание классов

    return (
-        <>
+        <div className={s.inputWrapper}>
            <input
                id={id}
                type={'text'}
@@ -51,8 +51,8 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = (

                {...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри)
            />
-             <span id={id ? id + '-span' : undefined} className={finalSpanClassName}>{error}</span>
-        </>
+            <span id={id ? id + '-span' : undefined} className={finalSpanClassName}>{error}</span>
+        </div>
    )
 }

--- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
+++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
@@ -8,24 +8,30 @@
 }

 .default {
-    background: #003300;
-    color: #99ff99;
-    outline: none;
+    background: #06c;
 }

 .red {
-    background: #dd3355;
+    background: #cc1439;
 }

 .disabled {
-    color: #005500;
+    background: #004d99;
+    opacity: 0.5;
 }

 .button {
    position: relative;
-    margin: 10px;
    overflow: hidden;
    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 {
@@ -40,7 +46,7 @@

    transform: skew(45deg);

-    background-color: #ffffff;
+    background-color: #fff;
    opacity: 0.7;

    z-index: 14;
@@ -60,19 +66,30 @@
    height: 100vh;
    width: 300vw;

-    background-color: #ffffff;
+    background-color: #fff;
    opacity: 0.2;

    z-index: 7;
 }

-.button:focus {
-    outline: #99ff99 solid 1px;
+.default:hover {
+    background: #0080ff;
 }

-.button:active {
-    background: #99ff99;
-    color: #003300;
+.red:hover {
+    background: #ff1a47;
+}
+
+.button:focus {
+
+}
+
+.default:active {
+    background: #0059b3;
+}
+
+.red:active {
+    background: #b31232;
 }

 .button:disabled {
--- a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css
+++ b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css
@@ -8,35 +8,37 @@
 /*input[type="checkbox"] - no*/

 .checkbox {
-    appearance: none; /*Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции.
-    Если задать значение none, то чекбокс пропадет, но по нему, тем не менее,
-    можно щелкать и состояние чекбокса будет меняться*/
+    appearance: none;
+    /*Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции.
+       Если задать значение none, то чекбокс пропадет, но по нему, тем не менее,
+       можно щелкать и состояние чекбокса будет меняться*/

-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;

-    /*background-repeat: no-repeat;*/
-    /*background-position: center center;*/
+    background-repeat: no-repeat;
+    background-position: center center;

-    /*background-size: 90% 90%;*/
-    /*vertical-align: middle;*/
-    margin-right: 10px;
-
-    background: #335533;
+    /* background-size: 90% 90%; */
+    vertical-align: middle;
+    margin-right: 8px;
+    border-radius: 3px;
+    border: 2px solid #06c;
    cursor: pointer;
 }

 .checkbox:checked {
    appearance: none;

-    background-image: url("checked.png");
+    background-image: url("checked.svg");
    /*background: #99ff99;*/
 }

 .checkbox:focus {
-    outline: #99ff99 solid 1px;
+    border-color: #0059b3;
 }

 .spanClassName {
-
+    font-family: 'Montserrat', sans-serif;
+    color: #06c;
 }
--- a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/checked.svg
+++ b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/checked.svg
@@ -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>