JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class='rating-stars text-center'>

    <ul id='stars'>
      <li class='star' title='Poor' data-value='1'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='Fair' data-value='2'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='Good' data-value='3'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='Excellent' data-value='4'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='WOW!!!' data-value='5'>
        <i class='fa fa-star fa-fw'></i>
      </li>
    </ul>
  </div>
  
<fieldset id="gift_vote_btn_wrap" disabled="">
<input type="submit" value="Weiter" class="wpcf7-form-control wpcf7-submit gift_form_submit" id="gift_vote_btn"><span class="ticon ticon-refresh ticon-spin wpex-wpcf7-loader"></span><br>
</fieldset>

CSS

/*Star Rating*/

ul#stars {
    margin: 0 0 10px;
}

p#rating-label {
    font-size: 18px;
}

/* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type:none;
  padding:0;
  
  -moz-user-select:none;
  -webkit-user-select:none;
}
.rating-stars ul > li.star {
  display:inline-block;
  
}

/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
  font-size:2.5em; /* Change the size of the stars */
  color:#ccc; /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
  color:#FFCC36;
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
  color:#FF912C;
}

JavaScript

jQuery(document).ready(function(){

  /* 1. Visualizing things on Hover - See next part for action on click */
  jQuery('#stars li').on('mouseover', function(){
    var onStar = parseInt(jQuery(this).data('value'), 10); // The star currently mouse on

    // Now highlight all the stars that's not after the current hovered star
    jQuery(this).parent().children('li.star').each(function(e){
      if (e < onStar) {
        jQuery(this).addClass('hover');
      }
      else {
        jQuery(this).removeClass('hover');
      }
    });

  }).on('mouseout', function(){
    jQuery(this).parent().children('li.star').each(function(e){
      jQuery(this).removeClass('hover');
    });
  });


  /* 2. Action to perform on click */
  jQuery('#stars li').on('click', function(){
    var onStar = parseInt(jQuery(this).data('value'), 10); // The star currently selected
    var stars = jQuery(this).parent().children('li.star');

    for (i = 0; i < stars.length; i++) {
      jQuery(stars[i]).removeClass('selected');
    }

    for (i = 0; i < onStar; i++) {
      jQuery(stars[i]).addClass('selected');
    }

    // JUST RESPONSE (Not needed)
    var ratingValue = parseInt(jQuery('#stars li.selected').last().data('value'), 10);
    responseMessage(ratingValue);

  });


});

function responseMessage(ratingValue) {
document.getElementById("rating").value = ratingValue;



jQuery("#gift_vote_btn_wrap")[0].disabled = false;

  if (ratingValue > 3 ) {
    var redirect_url = '/google-review/';
  } else {
    var redirect_url = 'http://yahoo.com/';
  }
  document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = redirect_url;
  }, false );
}