Виджет рейтинга

HTMLCSSJS

Виджет рейтинга — это классическая задача на манипуляцию DOM-деревом и обработку событий. Основная сложность здесь заключается не столько в вёрстке, сколько в реализации логики: звёзды должны динамически подсвечиваться при наведении и фиксировать своё состояние после клика.

Этот челлендж поможет вам закрепить навыки работы с событиями мыши (mouseenter, mouseleave, click), делегированием событий и управлением классами в CSS.

📝 Задача

Вам необходимо реализовать компактный виджет обратной связи. Пользователь должен иметь возможность выбрать оценку от 1 до 5 звёзд, после чего нажать кнопку «Submit».

Макет

Макет в Figma (Star Rating Animation)

💡 Идеи для практики

1. Логика наведения: Реализуйте «умную» подсветку: при наведении на третью звезду должны подсвечиваться первая, вторая и третья. При уходе курсора (если выбор не сделан) звёзды должны возвращаться в исходное состояние.
2. Доступность (A11Y): Попробуйте сделать виджет доступным для управления с клавиатуры. Хорошей практикой считается использование скрытых input type="radio" для каждой звезды.
3. Состояние после отправки: Добавьте простую анимацию или экран «Спасибо за отзыв!» после нажатия на кнопку отправки, чтобы сделать интерфейс более живым.

🤔 FAQ

Оставьте ссылку на ваше решение в комментариях ниже, например на GitHub или на live-просмотр.

Спрашивайте совета у других участников сообщества в комментариях.

Безусловно! Одна из главных идей создания этой платформы — помочь разработчикам пополнить портфолио профессионально выглядящими проектами!

Мы не предоставляем «официальных» решений для заданий, потому что не существует единственно правильного способа выполнить задание. Вместо этого мы рекомендуем изучать код других участников сообщества. Вы многому научитесь, наблюдая, как другие люди подходили к тем же заданиям.

Twep.ru — это сообщество совместного обучения, где каждый может давать друг другу обратную связь. Если вы хотите получить отзывы от сообщества, обязательно задайте конкретный вопрос при отправке своего решения. Чем точнее вы сформулируете свой вопрос, тем выше вероятность получить полезные комментарии от других участников.

Конечно! Наши задания включают профессиональные макеты, но никаких ограничений на используемые инструменты нет. Вы можете использовать всё, что вам нравится, чтобы реализовать проект.