Рейтинг звёздами
Условие
Пять звёзд. Требования: · каждая звезда - <button class="star" data-index={i}> (индексы с 1); · у выбранных и предшествующих звёзд класс "on"; · наведение мышью подсвечивает предварительный выбор, уход мышью возвращает подтверждённое значение; · клик фиксирует значение и вызывает onChange(value); · повторный клик по той же звезде сбрасывает рейтинг в 0.
Что проверяют тесты
пять звёзд, ни одна не горит
клик зажигает нужное число
сообщает значение наружу
наведение подсвечивает, уход возвращает
повторный клик сбрасывает
Как подойти
Классическое разделение подтверждённого и предварительного состояния. Выражение hover || value читается в одну строку именно потому, что 0 ложный. mouseleave на контейнере, а не на звёздах: иначе переход между соседними звёздами будет сбрасывать подсветку. Сброс по повторному клику - деталь, которую обычно называют вслух отдельно, чтобы показать внимание к требованиям.
Подсказки: 3
- Нужны два состояния: подтверждённое значение и предварительное при наведении.
- Показываем hover || value - ноль ложный, поэтому выражение работает само собой.
- mouseleave вешается на контейнер, а не на каждую звезду.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.