Хостинг http://hw_react_03.olgapistryak.fe.a-level.com.ua/

-------------------КОММЕНТАНРИИ---------------

RangeInput
Хотела, чтобы при некорректном вводе, граница input краснела.
Покраснение реализовано через дата-атрибут - "флажок", свойства которого изменяются в css.
Пробовала стейт в один элемент value инпута - граница краснеет только при смене фокуса.
Попробовала сделать стейт массивом [value, attribut]. Результат такой же: граница краснеет только после смены фокусировки.
При этом в обих случаях дата-атрибут в ДОМе отображаестся корректно (т.е. при каждом изменении ввода в инпут).
=> решила проверить работу других свойств инпута: color и background-color. Оба свойства отрабатываются корректно
=> думаю, что отработка свойства при смене фокусировки - это заморочка именно свойства border-color.

TimerControl

Сделала 2 варианта:

1. инпут отдельно от аутпута
2. инпут и аутпут в одном месте: меняются ролями в зависимости от кнопки Старт

LCD
Т.к. кнопка старт/пауза относится к логике компонента, решила, что ее выносить в компонент presentation неуместно. Где она все-таки должна быть?

--------------Условия ДЗ---------------
React JSX Homework
Spoiler
Реализуйте компонент Spoiler, скрывающий контент и открывающий его по клику. Компонент будет получать 3 пропс:
header, который будет выводится всегда
open, может быть true или false, если написать в JSX без значения, это значит open={true}
вложенный контент, т. е. children, который отображается в открытом состоянии спойлера и не отображается в закрытом
Изначально компонент имеет состояние переданное через пропс open По клику на <div> в котором будет отображаться header должно меняться состояние на противоположное Обеспечьте условие, которое будет показывать или нет children.
const Spoiler = ({header="+", open, children}) => {
//напишите тут код
}

///......

<Spoiler header={<h1>Заголовок</h1>} open>
Контент 1

<p>
лорем ипсум траливали и тп.
</p>
</Spoiler>

<Spoiler>
    <h2>Контент 2</h2>
    <p>
        лорем ипсум траливали и тп.
    </p>
</Spoiler>
RangeInput
Реализовать компонент RangeInput, отображающий обычный <input /> со следующими возможностями:
prop min - минимальная длина строки в инпуте, если меньше - инпут становится красным
prop max - максимальная длина строки в инпуте, если большe - инпут становится красным
Используйте компонент-класс и setState для отслеживания и валидации длины инпута. Или useState
    <RangeInput min={2} max={10} />
PasswordConfirm
Реализовать компонент PasswordConfirm, отображающий два <input type='password'/> со следующими возможностями:
prop min - минимальная длина пароля
Используйте компонент-класс и setState для отслеживания и валидации совпадения паролей и проверки на длину.Или useState
По желанию добавьте более хитрые валидации типа проверки на размеры буков и наличие цифр в пароле.
    <PasswordConfirm min={2} />
Timer
Напишите компонент, в который передается через props количество секунд, а компонент при этом реализует обратный отсчет раз в секунду уменьшая количество секунд на 1. Останавливается на 0. Добавьте в компонент кнопку паузы.
Компонент должен отображать часы, минуты и секунды.
TimerControl
Напишите компонент, с тремя полями ввода (часы, минуты и секунды) и кнопкой Start, по которой будет стартовать компонент Timer
TimerContainer
const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>
SecondsTimer в данном случае играет роль presentation компонента, который сам ничего не умеет делать, а просто является шаблоном для отображения своих props в удобном для пользователя виде.
Реализуйте контейнерный компонент, который будет обеспечивать состояние и логику для любого таймера:
<TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
TimerContainer должен:
воспринимать три пропса:
seconds - секунды для обратного отсчета
refresh - периодичность обновления таймера в миллисекундах
render - компонент для отрисовки, которому передается текущее время
Время вычисляется не по количеству обновлений, а по разности между стартовым и текущим моментом. Иначе таймер будет очень неточен
так как JSX понимает переменные с маленькой буквы не как компоненты-функции, а как тэги HTML, переприсвойте props render в переменную с большой буквы и используйте её в JSX, как имя компонента, передавая пропс seconds.
Так как при любом обновлении состояния функция-компонент, как и любая другая функция, запускается целиком используйте setInterval в useEffect
LCD
Сделайте из компонента Timer presentation компонент без state, прикрутите его к TimerContainer
Watch
Реализуйте часы со стрелками в качестве presentation компонента:
квадратный блок-контейнер
стрелки и, возможно, цифры позиционируются с помощью transform: rotate(УГОЛdeg)
В верстке используйте position absolute для накладывания блоков стрелок и цифр друг на друга (это даст общий центр вращения)
для корректного центра вращения блок со стрелкой или цифрой должен быть шириной с родительский квадратный блок
есть еще всякий css (text-orientation) для вращения цифр внутри повернутого блока
Картинки
циферблат стрелка часовая стрелка минутная стрелка секундная
TimerControl + TimerContainer
Используя TimerControl обновите его код, в котором будет использоваться не Timer, а новый контейнерный компонент