homework/hw-react-03-jsx

Хостинг 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. инпут и аутпут в одном месте: меняются ролями в зависимости от кнопки Старт

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

в котором будет отображаться header должно меняться состояние на противоположное Обеспечьте условие, которое будет показывать или нет children. const Spoiler = ({header="+", open, children}) => { //напишите тут код }

///......

Заголовок} open> Контент 1

лорем ипсум траливали и тп.

<h2>Контент 2</h2>
<p>
    лорем ипсум траливали и тп.
</p>

RangeInput Реализовать компонент RangeInput, отображающий обычный со следующими возможностями: prop min - минимальная длина строки в инпуте, если меньше - инпут становится красным prop max - максимальная длина строки в инпуте, если большe - инпут становится красным Используйте компонент-класс и setState для отслеживания и валидации длины инпута. Или useState

<RangeInput min={2} max={10} />

PasswordConfirm Реализовать компонент PasswordConfirm, отображающий два со следующими возможностями: prop min - минимальная длина пароля Используйте компонент-класс и setState для отслеживания и валидации совпадения паролей и проверки на длину.Или useState По желанию добавьте более хитрые валидации типа проверки на размеры буков и наличие цифр в пароле.

<PasswordConfirm min={2} />

Timer Напишите компонент, в который передается через props количество секунд, а компонент при этом реализует обратный отсчет раз в секунду уменьшая количество секунд на 1. Останавливается на 0. Добавьте в компонент кнопку паузы. Компонент должен отображать часы, минуты и секунды. TimerControl Напишите компонент, с тремя полями ввода (часы, минуты и секунды) и кнопкой Start, по которой будет стартовать компонент Timer TimerContainer const SecondsTimer = ({seconds}) =>

{seconds}

SecondsTimer в данном случае играет роль presentation компонента, который сам ничего не умеет делать, а просто является шаблоном для отображения своих props в удобном для пользователя виде. Реализуйте контейнерный компонент, который будет обеспечивать состояние и логику для любого таймера: 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, а новый контейнерный компонент