01.06.2024 в 16:18
Полина Родионова
Как создать систему рейтинга с помощью Tailwind CSS и JavaScript
![](/static/storage/36359718096466337456125627365459046073.png)
Сегодня мы создадим систему рейтинга с помощью Tailwind CSS и JavaScript. Как и в прошлом уроке, где мы использовали Alpine.js, но с помощью javascript.
Краткое напоминание о сути рейтинговых систем
Рейтинговые системы — это способ оценивания контента на сайте или в приложении. Они используются для того, чтобы помочь пользователям принимать обоснованные решения относительно просматриваемого контента. Рейтинговые системы могут использоваться для всего: от фильмов и книг до продуктов и услуг.
Примеры использования:
- Покупки: Например, пользователь может оценить товар на сайте магазина.
- Фильмы: Пользователь может оценить, понравился ли ему фильм или насколько хорошо он был снят.
- Книги: Покупатель может оценить книгу на сайте.
- Продукты: Пользователь может оценить товар на сайте электронной коммерции.
- Услуги: Пользователь может оценить услугу на сайте.
Давайте приступим!
Такова структура проекта:
Понимание кода:
id=«ratingApp»
: Это контейнер, в котором будет храниться система рейтинга.id=«starsContainer»
: Это контейнер, в котором будут храниться звезды.id=«currentRating»
: Это контейнер, в котором будет храниться текущий рейтинг.
<div id="ratingApp">
<div id="starsContainer">
<svg class="... text-gray-400" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
</svg>
</div>
<div class="mt-2">
<span id="currentRating">0 stars</span>
</div>
</div>
Скрипт
document.addEventListener(«DOMContentLoaded», function() {
: Это слушатель события, который будет запущен при загрузке страницы.
Селекторы запросов
const stars = document.querySelectorAll(«#starsContainer svg»);
: Это селектор запроса, который выберет все элементыsvg
в контейнереstars
.const currentRating = document.getElementById(«currentRating»);
: Это селектор запроса, который выберет текущий элемент рейтинга.
const stars = document.querySelectorAll("#starsContainer svg");
const currentRating = document.getElementById("currentRating");
Функция отображения обновления рейтинга
let rating = -1;
: Это переменная, которая будет хранить текущий рейтинг.const updateRatingDisplay = () => {
: Это функция, которая будет обновлять отображение рейтинга.currentRating.textContent = rating === -1 ? "0 stars" : rating + 1 + " stars";
: Это код, который будет обновлять текущий элемент рейтинга.stars.forEach((star, index) => {
: Это цикл, который будет обновлять звезды.star.classList.toggle(«text-orange-500», index <= rating);
: Это код, который будет переключать класс звезды в зависимости от текущего рейтинга.star.classList.toggle(«text-gray-400», index > rating);
: Это код, который будет переключать класс звезды в зависимости от текущего рейтинга.
let rating = -1;
const updateRatingDisplay = () => {
currentRating.textContent =
rating === -1 ? "0 stars" : rating + 1 + " stars";
stars.forEach((star, index) => {
star.classList.toggle("text-orange-500", index <= rating);
star.classList.toggle("text-gray-400", index > rating);
});
};
Слушатель событий
stars.forEach((star, index) => {
: Это цикл, который добавит слушателя события к каждой звезде.star.addEventListener(«click», () => {
: Это слушатель события, который будет запускаться при нажатии на звезду.rating = rating === index ? -1 : index;
: Это код, который будет обновлять рейтинг на основе нажатой звезды.updateRatingDisplay();
: Это код, который будет обновлять отображение рейтинга.
stars.forEach((star, index) => {
star.addEventListener("click", () => {
rating = rating === index ? -1 : index;
updateRatingDisplay();
});
});
Главная функция
updateRatingDisplay();
: Это код, который будет обновлять отображение рейтинга.
document.addEventListener("DOMContentLoaded", function() {
const stars = document.querySelectorAll("#starsContainer svg");
const currentRating = document.getElementById("currentRating");
let rating = -1;
const updateRatingDisplay = () => {
currentRating.textContent =
rating === -1 ? "0 stars" : rating + 1 + " stars";
stars.forEach((star, index) => {
star.classList.toggle("text-orange-500", index <= rating);
star.classList.toggle("text-gray-400", index > rating);
});
};
stars.forEach((star, index) => {
star.addEventListener("click", () => {
rating = rating === index ? -1 : index;
updateRatingDisplay();
});
});
updateRatingDisplay();
});