What are the steps to create a basic star-rating system?

Question

What are the steps to create a basic star-rating system?

I attempted to create my own star rating system using HTML and CSS, but encountered issues with its functionality. While solutions like using direction: rtl or float: right worked, I am unable to implement them due to constraints related to PHP.

Is there a way to achieve the desired outcome using only CSS and HTML?

$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});

.stars input {
    position: absolute;
    left: -999999px;
}

.stars a {
    display: inline-block;
    font-size: 0;
    text-decoration: none;
}

.stars a:before {
    position: relative;
    font-size: 18px;
    font-family: 'FontAwesome', serif;
    display: block;
    content: "\f005";
    color: #9e9e9e;
}

.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<p class="stars">
  <span>
    <a class="star-1" href="#">1</a>
    <a class="star-2" href="#">2</a>
    <a class="star-3" href="#">3</a>
    <a class="star-4" href="#">4</a>
    <a class="star-5" href="#">5</a>
  </span>
</p>

javascript jquery html css rating

Answer 1

Answer №1

When working on the HTML, I noticed an interesting color change that could be reversed using pure CSS. The issue lies in the fact that + and ~ selectors only work on next elements, which is why I suggested making the next a element gray instead of blue.

I attempted to manipulate the CSS alone, but eventually had to introduce a new class to the span element to address the active state. My solution resulted in the following code:

$('.stars a').on('click', function(){
  $('.stars span, .stars a').removeClass('active');

  $(this).addClass('active');
  $('.stars span').addClass('active');
});

.stars input {
    position: absolute;
    left: -999999px;
}

.stars a {
    display: inline-block;
    padding-right:4px;
    text-decoration: none;
    margin:0;
}

.stars a:after {
    position: relative;
    font-size: 18px;
    font-family: 'FontAwesome', serif;
    display: block;
    content: "\f005";
    color: #9e9e9e;
}


span {
  font-size: 0; /* trick to remove inline-element's margin */
}

.stars a:hover ~ a:after{
  color: #9e9e9e !important;
}
span.active a.active ~ a:after{
  color: #9e9e9e;
}

span:hover a:after{
  color:blue !important;
}

span.active a:after,
.stars a.active:after{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<p class="stars">
  <span>
    <a class="star-1" href="#">1</a>
    <a class="star-2" href="#">2</a>
    <a class="star-3" href="#">3</a>
    <a class="star-4" href="#">4</a>
    <a class="star-5" href="#">5</a>
  </span>
</p>

Hopefully this solution proves helpful! :)

Answer 2

When working on the HTML, I noticed an interesting color change that could be reversed using pure CSS. The issue lies in the fact that + and ~ selectors only work on next elements, which is why I suggested making the next a element gray instead of blue.

I attempted to manipulate the CSS alone, but eventually had to introduce a new class to the span element to address the active state. My solution resulted in the following code:

$('.stars a').on('click', function(){
  $('.stars span, .stars a').removeClass('active');

  $(this).addClass('active');
  $('.stars span').addClass('active');
});

.stars input {
    position: absolute;
    left: -999999px;
}

.stars a {
    display: inline-block;
    padding-right:4px;
    text-decoration: none;
    margin:0;
}

.stars a:after {
    position: relative;
    font-size: 18px;
    font-family: 'FontAwesome', serif;
    display: block;
    content: "\f005";
    color: #9e9e9e;
}


span {
  font-size: 0; /* trick to remove inline-element's margin */
}

.stars a:hover ~ a:after{
  color: #9e9e9e !important;
}
span.active a.active ~ a:after{
  color: #9e9e9e;
}

span:hover a:after{
  color:blue !important;
}

span.active a:after,
.stars a.active:after{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<p class="stars">
  <span>
    <a class="star-1" href="#">1</a>
    <a class="star-2" href="#">2</a>
    <a class="star-3" href="#">3</a>
    <a class="star-4" href="#">4</a>
    <a class="star-5" href="#">5</a>
  </span>
</p>

Hopefully this solution proves helpful! :)

Answer 3

Answer №2

This method utilizes radio buttons to create the desired outcome

<h1>CSS Star Rating System</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Excellent - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Very good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Very good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Okay - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Okay - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Not great - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Not great - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Poor - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Terrible - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Abysmal - 0.5 stars"></label>
</fieldset>

Visit this link for more information

Answer 4

This method utilizes radio buttons to create the desired outcome

<h1>CSS Star Rating System</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Excellent - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Very good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Very good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Okay - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Okay - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Not great - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Not great - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Poor - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Terrible - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Abysmal - 0.5 stars"></label>
</fieldset>

Visit this link for more information

Answer 5

Answer №3

Creating a user-friendly star rating system using only javascript.

HTML

<div id="rating_bar"> </div>

CSS

#rating_bar {
    width:100px;
    height:100px;
    display:inline-block;
    display:inline;
}

Javascript

var content ='';
  for(var i=1;i<=5;i++)
  content += ' <span id="rate_'+i+'">✰</span> ';
document.getElementById('rating_bar').innerHTML=content;
 
var spans = document.getElementById("rating_bar")
.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
  spans[i].onmouseover=hoverStar;
  
function hoverStar() 
{
  for(i=0;i<this.id.charAt(5);i++)
    spans[i].innerText='⭐';
  for(i=this.id.charAt(5);i<5;i++)
    spans[i].innerText='✰';
}

Sample Output:

https://i.sstatic.net/FCKT7.png

Answer 6

Creating a user-friendly star rating system using only javascript.

HTML

<div id="rating_bar"> </div>

CSS

#rating_bar {
    width:100px;
    height:100px;
    display:inline-block;
    display:inline;
}

Javascript

var content ='';
  for(var i=1;i<=5;i++)
  content += ' <span id="rate_'+i+'">✰</span> ';
document.getElementById('rating_bar').innerHTML=content;
 
var spans = document.getElementById("rating_bar")
.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
  spans[i].onmouseover=hoverStar;
  
function hoverStar() 
{
  for(i=0;i<this.id.charAt(5);i++)
    spans[i].innerText='⭐';
  for(i=this.id.charAt(5);i<5;i++)
    spans[i].innerText='✰';
}

Sample Output:

https://i.sstatic.net/FCKT7.png

Answer 7

Answer №4

HTML

    <div class="rating" tabindex="1" onblur="calculateRating(this)">
      <i class="fa fa-star-o" aria-hidden="true" value="1" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="2" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="3" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="4" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="5" onclick="clickStar(this)"></i>
    </div>
    <div class="rating-display"></div>

CSS

.clicked{
color:yellow;}

JAVASCRIPT

var rating = document.querySelector(".rating");
var ratingDisplayEle = document.querySelector(".rating-display");

//add event listener
function clickStar(ele){
  var clickedStar = ele;
  //value of the star
  var ratingValue = parseInt(clickedStar.getAttribute("value"));
  //change the color of the star
  for(var i=0; i<ratingValue; i++){
    rating.children[i].classList.add("clicked");
    for(var j=ratingValue; j<=4; j++){
      if(rating.children[j].classList.contains("clicked")){
        rating.children[j].classList.remove("clicked");
      }
    }
  }
}

//function to calculate rating
function calculateRating(ele){
  //check how many elements are having clicked class
  var ratingCount = 0;
  for(var i=0; i<ele.children.length; i++){
    if(ele.children[i].classList.contains("clicked")){
      ratingCount++;
    }
  }
  ratingDisplayEle.textContent = `You have selected ${ratingCount} rating out of 5`;
}

Answer 8

HTML

    <div class="rating" tabindex="1" onblur="calculateRating(this)">
      <i class="fa fa-star-o" aria-hidden="true" value="1" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="2" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="3" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="4" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="5" onclick="clickStar(this)"></i>
    </div>
    <div class="rating-display"></div>

CSS

.clicked{
color:yellow;}

JAVASCRIPT

var rating = document.querySelector(".rating");
var ratingDisplayEle = document.querySelector(".rating-display");

//add event listener
function clickStar(ele){
  var clickedStar = ele;
  //value of the star
  var ratingValue = parseInt(clickedStar.getAttribute("value"));
  //change the color of the star
  for(var i=0; i<ratingValue; i++){
    rating.children[i].classList.add("clicked");
    for(var j=ratingValue; j<=4; j++){
      if(rating.children[j].classList.contains("clicked")){
        rating.children[j].classList.remove("clicked");
      }
    }
  }
}

//function to calculate rating
function calculateRating(ele){
  //check how many elements are having clicked class
  var ratingCount = 0;
  for(var i=0; i<ele.children.length; i++){
    if(ele.children[i].classList.contains("clicked")){
      ratingCount++;
    }
  }
  ratingDisplayEle.textContent = `You have selected ${ratingCount} rating out of 5`;
}

Answer 9

Answer №5

A Simple Star Rating System

function updateRating() {
var fiveStar = document.getElementById('1-star').checked;
document.getElementById("one").innerHTML = fiveStar;

}

/* CSS for star rating component */

.star-rating {
  
  display:flex;
  flex-direction: row-reverse;
  font-size:3em;
  justify-content:space-around;
  padding:0 .2em;
  text-align:center;
  width:5em;
}

.star-rating input {
  display:none;
}

.star-rating label {
  color:#ccc;
  cursor:pointer;
}

.star-rating :checked ~ label {
  color:#f90;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color:#fc0;
}

<div class="star-rating">
  <input type="radio" id="5-stars" name="rating" value="5" />
  <label for="5-stars" class="star">&#9733;</label>
  <input type="radio" id="4-stars" name="rating" value="4" />
  <label for="4-stars" class="star">&#9733;</label>
  <input type="radio" id="3-stars" name="rating" value="3" />
  <label for="3-stars" class="star">&#9733;</label>
  <input type="radio" id="2-stars" name="rating" value="2" />
  <label for="2-stars" class="star">&#9733;</label>
  <input type="radio" id="1-star" name="rating" value="1" />
  <label for="1-star" class="star">&#9733;</label>
</div>
<p id="one" onclick="updateRating()">Click me to change my HTML content (innerHTML).</p>

Answer 10

A Simple Star Rating System

function updateRating() {
var fiveStar = document.getElementById('1-star').checked;
document.getElementById("one").innerHTML = fiveStar;

}

/* CSS for star rating component */

.star-rating {
  
  display:flex;
  flex-direction: row-reverse;
  font-size:3em;
  justify-content:space-around;
  padding:0 .2em;
  text-align:center;
  width:5em;
}

.star-rating input {
  display:none;
}

.star-rating label {
  color:#ccc;
  cursor:pointer;
}

.star-rating :checked ~ label {
  color:#f90;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color:#fc0;
}

<div class="star-rating">
  <input type="radio" id="5-stars" name="rating" value="5" />
  <label for="5-stars" class="star">&#9733;</label>
  <input type="radio" id="4-stars" name="rating" value="4" />
  <label for="4-stars" class="star">&#9733;</label>
  <input type="radio" id="3-stars" name="rating" value="3" />
  <label for="3-stars" class="star">&#9733;</label>
  <input type="radio" id="2-stars" name="rating" value="2" />
  <label for="2-stars" class="star">&#9733;</label>
  <input type="radio" id="1-star" name="rating" value="1" />
  <label for="1-star" class="star">&#9733;</label>
</div>
<p id="one" onclick="updateRating()">Click me to change my HTML content (innerHTML).</p>

What are the steps to create a basic star-rating system?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is it possible to determine if the process for changing Three.js material has been successfully completed?

What is the process of canceling a load or updating a page in jQuery Mobile?

Sending FormData from React.js to an Express.js backend results in loss of data

Retrieve information from subcategories in the Realtime Database using Firebase

Boxes not occupying entire vertical space

Unique Menu: Challenge when adjusting the width of 5 divs upon hovering while maintaining full site width at 100%

What is the method for editing individual rows in a data table in Spring MVC when the edit button is clicked?

Guide on hosting Google's Material Design Icon-Fonts on your personal server and incorporating them into your website

Spin a sphere by clicking on a link using three.js

The most effective method for monitoring updates to an array of objects in React

PHP script not being triggered by Ajax upload

Tips for asynchronously updating a model in TypeScript

Updating the CSS class for a particular text segment enclosed in a <p> or <span> element

Is there a way to decrease a field in a MongoDB database on a daily basis?

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

What could be causing the issue with the functionality of third-level nested SortableJS drag-and-drop?

What is the best way to showcase SVG code as an image using Vuejs?

Creating a wider background color for active nav bar links in CSS - A step-by-step guide

Locate the destination URL in Fancybox

Modifying CSS files in real-time