Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
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.
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:
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-neutral-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() {
: This is the event listener that will run when the page is loaded.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");
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-neutral-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-neutral-400", index > rating);
});
};
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();
});
});
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-neutral-400", index > rating);
});
};
stars.forEach((star, index) => {
star.addEventListener("click", () => {
rating = rating === index ? -1 : index;
updateRatingDisplay();
});
});
updateRatingDisplay();
});
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!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!