<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Star rating</title>

	<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

	<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

</head>

<body>

<div id="voting">
 <div id="introtext">Please rate this:</div>

 <div id="allstars">
	  <i class="fa fa-star" aria-hidden="true"></i>
	  <i class="fa fa-star" aria-hidden="true"></i>
	  <i class="fa fa-star" aria-hidden="true"></i>
	  <i class="fa fa-star" aria-hidden="true"></i>
	  <i class="fa fa-star" aria-hidden="true"></i>
 </div>

<button id="votebutton">
 <span id="votetext">The text vote</span>
 <span id="confirmbut"><i class="far fa-check-square" style="background:MistyRose" data-fa-transform="grow-8"></i></span>
</button>

<div id="whatvoted"></div>

</div>

</body>
</html>
body{
  height: 100vh;
	background:
		-webkit-linear-gradient(45deg, hsla(244, 94%, 44%, 1) 0%, hsla(244, 94%, 44%, 0) 70%),
		-webkit-linear-gradient(315deg, hsla(185, 94%, 46%, 1) 10%, hsla(185, 94%, 46%, 0) 80%),
		-webkit-linear-gradient(225deg, hsla(65, 96%, 44%, 1) 10%, hsla(65, 96%, 44%, 0) 80%),
		-webkit-linear-gradient(135deg, hsla(277, 97%, 46%, 1) 100%, hsla(277, 97%, 46%, 0) 70%);
	background:
		linear-gradient(45deg, hsla(244, 94%, 44%, 1) 0%, hsla(244, 94%, 44%, 0) 70%),
		linear-gradient(135deg, hsla(185, 94%, 46%, 1) 10%, hsla(185, 94%, 46%, 0) 80%),
		linear-gradient(225deg, hsla(65, 96%, 44%, 1) 10%, hsla(65, 96%, 44%, 0) 80%),
		linear-gradient(315deg, hsla(277, 97%, 46%, 1) 100%, hsla(277, 97%, 46%, 0) 70%);
}

#voting{
  margin: 100px auto;
  width: 300px;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  font-size: 1.3em;
  color: white;
  font-family: 'Verdana', 'Georgia', serif;
  //background from the beautiful ui gradients
  background: #0f0c29;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#allstars{
  margin: 0 auto;
  display: flex;
  width: 200px;
  height: 50px;
  align-items: center;
  justify-content: center;
}

.fa-star{
  flex: 1 0 20%;
  cursor: pointer;
}

.fa-star:hover{
  color: orange;
}

#votebutton{
  background-color: white;
  border: none;
  padding: 20px;
  border-radius: 10px;
  font-size: .8em;
  cursor: pointer;
  color: purple;
  display: none;
  transition: .5s ease;
}

#votebutton:hover{
transition: .5s ease;
box-shadow:
1px 1px #00d6d6,
2px 2px #00d6d6,
3px 3px #00d6d6,
4px 4px #00d6d6,
5px 5px #00d6d6,
6px 6px #00d6d6;
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

#confirmbut{
  color: teal;
  padding: 10px;
  margin-left: 5px;
}


#whatvoted{
  display: none;
  color: gray;
}

#votebutton:focus {
  outline:0;
}

const rating = ["Awful", "Bad", "Average", "Good", "Excellent"];

$(document).ready(function(){
//
let alreadyclicked = false;

$('.fa-star').each(function(){
  $(this).mouseenter(function(){
    $(this).prevAll().addBack().css("color", "orange");
    $(this).nextAll().css("color", "white");
  }).mouseleave(function(){
    if (!alreadyclicked){
     $('.fa-star').css("color", "white");      
    } else {
      $(".fa-star:eq(" + thisindex + ")").prevAll().addBack().css("color", "orange");
      $(".fa-star:eq(" + thisindex + ")").nextAll().css("color", "white");
    }
  });
});


$('.fa-star').each(function(){
  $(this).on("click", function(el, index){
    alreadyclicked = true;
    $(this).prevAll().addBack().css("color", "orange");
    window.thisindex = $(this).index();
    $('#votetext').text(rating[thisindex]);
    $('#whatvoted').text(rating[thisindex]);
    $('#introtext').text('Confirm your rating')
    $('#votebutton').show();
  });
});

$('#votebutton').on('click', function(){
  $(this).toggle();
  $('#whatvoted').show();
  $('#introtext').text('You rated this as:');
  $('.fa-star').css('pointer-events', 'none');
  $('#voting').css('cursor', 'not-allowed');
  $('#votetext').css('color', 'gray');
  $('#introtext').css('color', 'gray');
})

 //end of document ready
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.