How to create a rating system with Tailwind CSS and JavaScript

It's Friday! And today we are goign to create a rating system using Tailwind CSS and JavaScript. Just like the last tutorial, where we used Alpine.js, but with javascript.

See it live and get the code

A refesh of what rating systems are.

Rating systems are a way to rate content on a website or app. They are used to help users make informed decisions about the content they are viewing. Rating systems can be used for anything from movies and books to products and services.

Uses cases:

• Shopping: For example, a user can rate a product on a shopping site.
• Movies: A user can rate a if they like a movie or how well it was made.
• Books: A customer can rate a book on a website.
• Products: A user can rate a product on an e-commerce site.
• Services: A user can rate a service on a website.

Let's get started

This is the structure of the project:
Understanding the code:

• id="ratingApp": This is the container that will hold the rating system.
• id="starsContainer": This is the container that will hold the stars.
• id="currentRating": This is the container that will hold the current rating.

 <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>

The script

• document.addEventListener("DOMContentLoaded", function() {: This is the event listener that will run when the page is loaded.

The query selectors

• const stars = document.querySelectorAll("#starsContainer svg");: This is the query selector that will select all the svg elements in the stars container.
• const currentRating = document.getElementById("currentRating");: This is the query selector that will select the current rating element.

const stars = document.querySelectorAll("#starsContainer svg");
const currentRating = document.getElementById("currentRating");

The update rating display function

• let rating = -1;: This is the variable that will store the current rating.
• const updateRatingDisplay = () => {: This is the function that will update the rating display.
• currentRating.textContent = rating === -1 ? "0 stars" : rating + 1 + " stars";: This is the code that will update the current rating element.
• stars.forEach((star, index) => {: This is the loop that will update the stars.
• star.classList.toggle("text-orange-500", index <= rating);: This is the code that will toggle the class of the star based on the current rating.
• star.classList.toggle("text-gray-400", index > rating);: This is the code that will toggle the class of the star based on the current 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);
    });
};

The event listener

• stars.forEach((star, index) => {: This is the loop that will add the event listener to each star.
• star.addEventListener("click", () => {: This is the event listener that will run when a star is clicked.
• rating = rating === index ? -1 : index;: This is the code that will update the rating based on the clicked star.
• updateRatingDisplay();: This is the code that will update the rating display.

 stars.forEach((star, index) => {
     star.addEventListener("click", () => {
         rating = rating === index ? -1 : index;
         updateRatingDisplay();
     });
 });

The main function

• updateRatingDisplay();: This is the code that will update the rating display.

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();
});

Conclusion

In this tutorial, we learned how to create a rating system using Tailwind CSS and JavaScript. We used the DOMContentLoaded event listener to run the code when the page is loaded, and we used query selectors to select the elements we need to update. We also used a function to update the rating display and a loop to add event listeners to each star.

By following these steps, you can create a rating system that allows users to rate content on your website or app. This can be a great way to help users make informed decisions and provide feedback on the quality of your content.

Hope you enjoyed and have a good day!