final ref hw11

src/s2-homeworks/hw05/pages/JuniorPlus.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import HW10 from '../../hw10/HW10'
-// import HW11 from '../../hw11/HW11'
+import HW11 from '../../hw11/HW11'
 // import HW12 from '../../hw12/HW12'
 // import HW13 from '../../hw13/HW13'
 
@@ -8,7 +8,7 @@ function JuniorPlus() {
     return (
         <div id={'hw5-page-junior-plus'}>
             <HW10 />
-            {/*<HW11 />*/}
+            <HW11 />
             {/*<HW12 />*/}
             {/*<HW13 />*/}
         </div>

src/s2-homeworks/hw11/HW11.module.css

@@ -8,8 +8,14 @@
     display: flex;
     align-items: center;
     gap: 25px;
+
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     font-size: 16px;
     line-height: 20px;
 }
+
+.number {
+    display: inline-block;
+    width: 17px;
+}

src/s2-homeworks/hw11/HW11.tsx

@@ -4,18 +4,24 @@ import s2 from '../../s1-main/App.module.css'
 import { restoreState } from '../hw06/localStorage/localStorage'
 import SuperRange from './common/c7-SuperRange/SuperRange'
 
-function HW11() {
+/*
-    const [value1, setValue1] = useState(restoreState<number>('hw11-value1', 0))
+* 1 - передать значения в оба слайдера
-    const [value2, setValue2] = useState(
+* 2 - дописать типы и логику функции change
-        restoreState<number>('hw11-value2', 100)
+* 3 - сделать стили в соответствии с дизайном
-    )
+* */
 
-    const change = (event: Event, newValue: number | number[]) => {
+function HW11() {
-        if (Array.isArray(newValue)) {
+    // for autotests // не менять // можно подсунуть в локалСторэдж нужные числа, чтоб увидеть как они отображаются
-            setValue1(newValue[0])
+    const [value1, setValue1] = useState(restoreState<number>('hw11-value1', 0))
-            setValue2(newValue[1])
+    const [value2, setValue2] = useState(restoreState<number>('hw11-value2', 100))
+
+    const change = (event: any, value: any) => {
+        // пишет студент // если пришёл массив - сохранить значения в оба useState, иначе в первый
+        if (Array.isArray(value)) {
+            setValue1(value[0])
+            setValue2(value[1])
         } else {
-            setValue1(newValue)
+            setValue1(value)
         }
     }
 
@@ -23,24 +29,26 @@ function HW11() {
         <div id={'hw11'}>
             <div className={s2.hwTitle}>Homework #11</div>
 
-            {/*should work (должно работать)*/}
             <div className={s2.hw}>
                 <div className={s.container}>
                     <div className={s.wrapper}>
-                        <span id={'hw11-value'}>{value1}</span>
+                        <span id={'hw11-value'} className={s.number}>{value1}</span>
                         <SuperRange
-                            // сделать так чтоб value1 изменялось
+                            id={'hw11-single-slider'}
+                            // сделать так чтоб value1 изменялось // пишет студент
                             value={value1}
                             onChange={change}
                         />
                     </div>
                     <div className={s.wrapper}>
-                        <span id={'hw11-value-1'}>{value1}</span>
+                        <span id={'hw11-value-1'} className={s.number}>{value1}</span>
                         <SuperRange
+                            id={'hw11-double-slider'}
+                            // сделать так чтоб value1/2 изменялось // пишет студент
                             value={[value1, value2]}
                             onChange={change}
                         />
-                        <span id={'hw11-value-2'}>{value2}</span>
+                        <span id={'hw11-value-2'} className={s.number}>{value2}</span>
                     </div>
                 </div>
             </div>

src/s2-homeworks/hw11/common/c7-SuperRange/SuperRange.tsx

@@ -1,44 +1,35 @@
 import React from 'react'
-import { Slider, SliderProps } from '@mui/material'
+import {Slider, SliderProps} from '@mui/material'
 
-// здесь мы говорим что у нашего слайдера будут такие же пропсы как у обычного mui слайдера
+const SuperRange: React.FC<SliderProps> = (props) => {
-// (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType)
-type SuperRangePropsType = SliderProps
-
-const SuperRange: React.FC<SuperRangePropsType> = ({
-    ...restProps // все остальные пропсы попадут в объект restProps
-}) => {
     return (
-        <>
+        <Slider
-            <Slider
+            sx={{ // стили для слайдера // пишет студент
-                id={'hw11-single-slider'}
+                width: '160px',
-                sx={{
+                color: '#00CC22',
-                    width: '160px',
+                '& .MuiSlider-track': {
-                    color: '#00CC22',
+                    border: 'none',
-                    '& .MuiSlider-track': {
+                },
-                        border: 'none',
+                '& .MuiSlider-thumb': {
+                    width: 20,
+                    height: 20,
+                    border: '1px solid #00CC22',
+                    backgroundColor: '#fff',
+                    '&:before': {
+                        content: '""',
+                        width: '6px',
+                        height: '6px',
+                        borderRadius: '50%',
+                        backgroundColor: '#00CC22',
+                        zIndex: -1,
                     },
-                    '& .MuiSlider-thumb': {
+                    '&:hover, &.Mui-focusVisible, &.Mui-active': {
-                        width: 20,
+                        boxShadow: 'none',
-                        height: 20,
-                        border: '1px solid #00CC22',
-                        backgroundColor: '#fff',
-                        '&:before': {
-                            content: '""',
-                            width: '6px',
-                            height: '6px',
-                            borderRadius: '50%',
-                            backgroundColor: '#00CC22',
-                            zIndex: -1,
-                        },
-                        '&:hover, &.Mui-focusVisible, &.Mui-active': {
-                            boxShadow: 'none',
-                        },
                     },
-                }}
+                },
-                {...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри)
+            }}
-            />
+            {...props} // отдаём слайдеру пропсы если они есть (value например там внутри)
-        </>
+        />
     )
 }