Звездный рейтинг. Все варианты! От простого без JavaScript к сложному с AJAX.

YOUTUBE · 01.12.2025 09:35

Ключевые темы и таймкоды

Создание простого рейтинга без использования JavaScript

0:00
  • Создание формы для оценки товара или статьи с использованием радио кнопок.
  • Использование обратного отсчета для изменения размера звездочек.
  • Применение псевдокласса для изменения цвета звездочек при наведении.
  • Использование псевдокласса для выделения активных звездочек.

Создание точного рейтинга с использованием JavaScript

10:42
  • Создание общей оболочки "рейтинг" и "рейтинг боди".
  • Создание "рейтинг актив" для заполнения в процентном соотношении.
  • Использование радио кнопок для оценки.
  • Вывод оценки в цифрах после "рейтинг боди".

Создание рейтинга с заполняющей линией

11:57
  • В видео автор объясняет, как создать рейтинг с заполняющей линией, используя HTML и CSS.
  • Он начинает с создания рейтинга с помощью псевдоэлементов и добавления звездочек.
  • Затем он добавляет заполняющую линию, используя псевдоэлемент и стили, чтобы заполнить звездочки.
  • Автор также объясняет, как управлять шириной заполняющей линии с помощью JavaScript.

Создание функции для указания рейтинга

14:47
  • Автор создает функцию для указания рейтинга, которая получает массив рейтингов и работает с каждым из них.
  • Он также создает вспомогательные функции для инициализации переменных и работы с активной полосой.
  • В конце автор объясняет, как использовать класс для указания рейтинга и как создать функцию для указания рейтинга только при наличии определенного класса.

Создание звездного рейтинга

22:22
  • В видео автор объясняет, как создать звездный рейтинг с использованием JavaScript.
  • Он объясняет, как использовать события для изменения активной полосы и как добавить событие при клике для выбора оценки.
  • Автор также показывает, как использовать функцию для отправки данных на сервер и как использовать класс для отображения статуса отправки.

Работа с датами и атрибутами

25:22
  • Автор объясняет, как использовать атрибут даты для работы с датами и как использовать функцию для отправки данных на сервер.
  • Он также показывает, как использовать класс для отображения статуса отправки и как изменить стиль рейтинга при отправке данных.

Проверка работы функционала

29:12
  • Автор проверяет работу функционала, отправляя данные на сервер и наблюдая за изменением активной полосы и стиля рейтинга.
  • Он также объясняет, как использовать атрибут даты для работы с датами и как изменить стиль рейтинга при отправке данных.