Звездный рейтинг. Все варианты! От простого без 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

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