Components

Rating

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.

Basic rating

Ratings component can be created by using rating class inside <span> tag. For star rating, add rating-star class & for heart rating add rating-heart class along with rating-input class. (e.g. class="rating-input rating-star")

Code Snippets

Badge Rating

Badge rating is created by using rating-badge class.

5 | 99

Code Snippets

              
              
                

                  5
                  
                  |
                  99

Live Rating Example

Click on star to see the final rating.

Code Snippets

HTML snippet

JS snippet

              
                /*-----------RATINGS DEMO---------------------*/

                const ratingInputs = document.querySelectorAll(".rating-example input");
                let ratingOutput = document.querySelector(".rating-output");

                ratingInputs.forEach((ratingInput, idx) => {
                  ratingInput.addEventListener("click", () => submitRating(idx));
                });

                const submitRating = (index) => {
                  ratingsTotal = 0;
                  for (let i = 0; i < ratingInputs.length; i++) {
                    ratingInputs[i].checked = i <= index ? true : false;
                    if (i <= index) ratingsTotal++;
                  }
                  ratingOutput.innerText = `You've given ${ratingsTotal} star rating.`;
                };
Previous Next