Как создать простую систему звездного рейтинга с помощью JavaScript и CSS
Интерактивный звездный рейтинг — простой, но мощный инструмент, который помогает пользователю выразить мнение, а владельцу сайта — собрать обратную связь. Ты наверняка встречал его на сайтах отзывов, интернет-магазинах и в блогах. В этой статье мы разберёмся, как сделать простую систему рейтинга CSS + JavaScript, но с парой нестандартных улучшений для лучшего UX.
Что нам понадобится для старта
Никаких фреймворков — только HTML, CSS и чистый JavaScript. Такой подход остаётся лёгким для восприятия и гибким для кастомизации. Пользуемся базовыми инструментами, чтобы максимально контролировать внешний вид и поведение рейтинга.
Вот базовая структура:
```html
```
Каждая звезда — это символ Unicode, который не требует изображений или иконок.
Стилизация: простая система рейтинга CSS
Добавим немного стилей, чтобы звёзды выглядели выразительно и реагировали на наведение курсора:
```css
.star-rating span {
font-size: 2rem;
color: #ccc;
cursor: pointer;
transition: color 0.2s;
}
.star-rating span.hover,
.star-rating span.selected {
color: gold;
}
```
Такой CSS звездный рейтинг легко масштабируется. Можно менять размер шрифта, цвет и даже использовать анимации. Это минимализм, который работает.
Нестандартное решение: полузвёзды без SVG
Многие реализации рейтинга в JavaScript используют SVG для половинчатых оценок, но можно обойтись без него. Вместо этого — использовать градиент фона:
```css
.star-rating span.half::before {
content: '★';
position: absolute;
width: 50%;
overflow: hidden;
color: gold;
}
```
Такой подход позволяет реализовать полузвезды даже без JavaScript, просто меняя класс элемента.
Добавим интерактивность: реализация рейтинга в JavaScript
Теперь подключим простой скрипт, чтобы звёзды реагировали на клик и наведение:
```javascript
const stars = document.querySelectorAll('.star-rating span');
let currentRating = 0;
stars.forEach(star => {
star.addEventListener('mouseover', () => {
resetStars();
highlightStars(star.dataset.value);
});
star.addEventListener('click', () => {
currentRating = star.dataset.value;
setRating(currentRating);
});
star.addEventListener('mouseout', () => {
resetStars();
if (currentRating) setRating(currentRating);
});
});
function highlightStars(rating) {
stars.forEach(star => {
if (star.dataset.value <= rating) {
star.classList.add('hover');
}
});
}
function setRating(rating) {
stars.forEach(star => {
star.classList.remove('selected');
if (star.dataset.value <= rating) {
star.classList.add('selected');
}
});
}
function resetStars() {
stars.forEach(star => {
star.classList.remove('hover');
});
}
```
Этот код отслеживает наведение и клик, изменяя классы. Всё просто, прозрачно, без лишних библиотек.
Как сохранить рейтинг? Идея для бэкенда
Если хочешь, чтобы рейтинг сохранялся, отправь его через `fetch()` на сервер:
```javascript
fetch('/save-rating', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({rating: currentRating})
})
.then(res => res.json())
.then(data => console.log(data));
```
Это уже за пределами фронтенда, но важно понимать, как интегрировать звездный рейтинг на сайте с серверной частью.
Расширяем функциональность: нестандартные идеи
Хочешь выйти за рамки стандартного UX? Вот несколько необычных решений:
1. Анимация при выборе — добавь scale или rotate к звезде при клике. Это вызывает микроудовольствие у пользователя.
2. Динамический текст — меняй текстовую подпись в зависимости от оценки (например: "Ужасно", "Отлично").
3. Цветовая палитра — пусть цвет звёзд зависит от значения (1 — красный, 5 — зелёный). Это поможет пользователю быстрее визуализировать оценку.
4. Ленивый рендеринг — показывай рейтинг только при наведении на блок или скролле в область, чтобы экономить ресурсы.
5. Доступность — добавь `aria-label` и управление с клавиатуры для инклюзивности.
Итог: просто, но гибко
Создание звездного рейтинга JavaScript и CSS — это не только вопрос кода, но и внимания к деталям. Даже простая система может быть функциональной и приятной в использовании, если подумать об анимации, доступности и внешнем виде. На первый взгляд — всего пять звёзд, а возможностей — десятки.
Если ты хочешь внедрить звездный рейтинг на сайте, не обязательно прибегать к готовым библиотекам. Простая реализация рейтинга в JavaScript может быть адаптирована под любой проект, а CSS даст возможность кастомизировать отображение до мелочей.
