01.06.2024 в 16:18

Как создать систему рейтинга с помощью Tailwind CSS и JavaScript

Сегодня мы создадим систему рейтинга с помощью 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();
});

Войти на сайт