Skip to content

Instantly share code, notes, and snippets.

@shparvez001

shparvez001/rating.html

Created August 3, 2022 15:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shparvez001/ea0bea7d358ec856487e0e78e289642e to your computer and use it in GitHub Desktop.
Save shparvez001/ea0bea7d358ec856487e0e78e289642e to your computer and use it in GitHub Desktop.
Download ZIP
A simple demonstration for star based rating UI.
Raw
rating.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name = "keywords" content = "HTML, Rating, Star, Star Rating" />
<meta name = "description" content = "A simple page showing how javascript can be used to dynamically change star rating statistics." />
<meta name = "author" content = "Shahadat Hussain Parvez (SHP)" />
<title> Example of Star Rating</title>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 auto; /* Center website */
/* max-width: 800px; Max width */
padding: 20px;
}
.ratingBox{
margin: 0 auto; /* Center website */
max-width: 360px; /* Change this width to the desired rating box width */
padding: 20px;
}
.heading {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
}
.rated{
color: green !important;
text-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.starHover{
color: blue !important;
text-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.checked {
color: orange;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: right;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Individual bars */
.bar-5 {width: 1%; height: 18px; background-color: #4CAF50;}
.bar-4 {width: 1%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 1%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 1%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 1%; height: 18px; background-color: #f44336;}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
/* For card */
.card {
padding: 16px 16px;
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Add some padding inside the card container */
.container {
padding: 10px 16px;
}
</style>
</head>
<body>
<div class="card ratingBox">
<span class="heading">User Rating</span>
<!--
<span class="star fa fa-star " id="star-1" onmouseover="focusRating(1)" onmouseout="removeRatingFocus()" onclick="saveRating(1)"></span>
<span class="star fa fa-star " id="star-2" onmouseover="focusRating(2)" onmouseout="removeRatingFocus()" onclick="saveRating(2)"></span>
<span class="star fa fa-star " id="star-3" onmouseover="focusRating(3)" onmouseout="removeRatingFocus()" onclick="saveRating(3)"></span>
<span class="star fa fa-star " id="star-4" onmouseover="focusRating(4)" onmouseout="removeRatingFocus()" onclick="saveRating(4)"></span>
<span class="star fa fa-star " id="star-5" onmouseover="focusRating(5)" onmouseout="removeRatingFocus()" onclick="saveRating(5)"></span>
-->
<span class="star fa fa-star " id="star-1" ></span>
<span class="star fa fa-star " id="star-2" ></span>
<span class="star fa fa-star " id="star-3" ></span>
<span class="star fa fa-star " id="star-4" ></span>
<span class="star fa fa-star " id="star-5" ></span>
<p><span id="post-rating-help" >..</span></p>
<p><b><span id="average-rating">..</span></b> average based on <b><span id="total-reviews">..</span></b> reviews.</p>
<hr style="border:3px solid #f1f1f1">
<div class="row">
<div class="side">
<div>5 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-5" id="bar-5"></div>
</div>
</div>
<div class="side right">
<div id="5-stars">..</div>
</div>
<div class="side">
<div>4 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-4" id="bar-4"></div>
</div>
</div>
<div class="side right">
<div id="4-stars">..</div>
</div>
<div class="side">
<div>3 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-3" id="bar-3"></div>
</div>
</div>
<div class="side right">
<div id="3-stars">..</div>
</div>
<div class="side">
<div>2 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-2" id="bar-2"></div>
</div>
</div>
<div class="side right">
<div id="2-stars">..</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-1" id="bar-1"></div>
</div>
</div>
<div class="side right">
<div id="1-stars">..</div>
</div>
</div>
</div>
<script>
var rates={A:10,B:5,C:10};
var i;
var ratinHelpTest="Clik on a star to add a rating";
//Load the previous rating of the user and feed it to the highlight function. Here it is shown statically.
var pastRatingOfUser=1;
//Use any function to change the user rating here.
//Load currently stored ratings input is number of stars from 1 to 5 serially. Use PHP or AJX to load the requisite star data and feed it to the function.
ratingLoad(15,50,10,50,500)
//Load the rating help text
document.getElementById("post-rating-help").innerText=ratinHelpTest;
//Adding Event Listener to all the stars for proper User Interaction for mouse events
document.getElementById("star-1").addEventListener("mouseover", function(){focusRating(1);});
document.getElementById("star-1").addEventListener("mouseout", function(){removeRatingFocus();});
document.getElementById("star-1").addEventListener("click", function(){saveRating(1);});
document.getElementById("star-2").addEventListener("mouseover", function(){focusRating(2);});
document.getElementById("star-2").addEventListener("mouseout", function(){removeRatingFocus();});
document.getElementById("star-2").addEventListener("click", function(){saveRating(2);});
document.getElementById("star-3").addEventListener("mouseover", function(){focusRating(3);});
document.getElementById("star-3").addEventListener("mouseout", function(){removeRatingFocus();});
document.getElementById("star-3").addEventListener("click", function(){saveRating(3);});
document.getElementById("star-4").addEventListener("mouseover", function(){focusRating(4);});
document.getElementById("star-4").addEventListener("mouseout", function(){removeRatingFocus();});
document.getElementById("star-4").addEventListener("click", function(){saveRating(4);});
document.getElementById("star-5").addEventListener("mouseover", function(){focusRating(5);});
document.getElementById("star-5").addEventListener("mouseout", function(){removeRatingFocus();});
document.getElementById("star-5").addEventListener("click", function(){saveRating(5);});
//Function to change the rating based on currently votes
function ratingLoad(one, two, three, four, five)
{
var i;
for (i=1;i<=5;i++)
{
document.getElementById("star-"+i).className="star fa fa-star"
}
var total=one+two+three+four+five;
var avgRating=(one*1+two*2+three*3+four*4+five*5)/total;
var per1=(one/total)*100;
var per2=(two/total)*100;
var per3=(three/total)*100;
var per4=(four/total)*100;
var per5=(five/total)*100;
console.log(per1+"% "+per2+"% "+per3+"% "+per4+"% "+per5+"%");
document.getElementById("bar-1").style.width=per1+"%";
document.getElementById("bar-2").style.width=per2+"%";
document.getElementById("bar-3").style.width=per3+"%";
document.getElementById("bar-4").style.width=per4+"%";
document.getElementById("bar-5").style.width=per5+"%";
document.getElementById("1-stars").innerText=one;
document.getElementById("2-stars").innerText=two;
document.getElementById("3-stars").innerText=three;
document.getElementById("4-stars").innerText=four;
document.getElementById("5-stars").innerText=five;
document.getElementById("average-rating").innerText=avgRating.toFixed(1);
document.getElementById("total-reviews").innerText=total;
//lighting star
for (i=1;i<avgRating;i++)
{
//document.getElementById("star-"+i).className+=" checked";
document.getElementById("star-"+i).classList.add("checked");
}
var partial=avgRating%1;
if (partial>0.5)
{
document.getElementById("star-"+i).className="star fa fa-star-half-full checked";
}
if(pastRatingOfUser>0)
{
highlightPreviousUserRating(pastRatingOfUser);
}
}
//ratingLoad(5,5,5,5,5);
//ratingLoad(15,50,10,50,50)
//Function for activity when an user hovers a star
function focusRating(starNumber)
{
//var i;
//console.log(starNumber);
removeRatingFocus();
for(i=1;i<=starNumber;i++)
{
//console.log(i);
document.getElementById("star-"+i).classList.add("starHover");
}
document.getElementById("post-rating-help").innerText="Click to add a "+starNumber+" star rating";
}
//Function to remove highlight when user removes mouse from a star
function removeRatingFocus()
{
var i;
for(i=1;i<=5;i++)
{
document.getElementById("star-"+i).classList.remove("starHover");
}
document.getElementById("post-rating-help").innerText=ratinHelpTest;
}
//Function for activity when an user clicks on a star. It saves the star by triggering an external php page to store to database and gives a visible feedback on the page.
function saveRating(starNumber)
{
var cid=1000;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('post-rating-help').innerHTML = this.responseText;
}
};
xmlhttp.open("POST", "ratingFeedback.php" , true);
//xmlhttp.send();
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("comp="+cid+"&rat="+starNumber);
pastRatingOfUser=starNumber;
highlightPreviousUserRating(pastRatingOfUser);
}
//Function to show past rating of the user
function highlightPreviousUserRating(starNumber)
{
for(i=1;i<=5;i++)
{
document.getElementById("star-"+i).classList.remove("rated");
}
for(i=1;i<=starNumber;i++)
{
document.getElementById("star-"+i).classList.add("rated");
}
ratinHelpTest="Click on a star to change your "+starNumber+" star rating";
}
function test()
{
console.log("Function triggered");
}
</script>
</body>
</html>
Raw
ratingFeedback.php
<?php
//Example of getting value through GET request.
//$comp = isset($_GET['comp']) ? $_GET['comp'] : "";
//$rat = isset($_GET['rat']) ? $_GET['rat'] : "";
//echo $comp;
//echo $rat;
//Example of getting value through POST request.
if (!empty($_POST["comp"])) { $comp=addslashes($_POST['comp']); }
if (!empty($_POST["rat"])) { $rat=addslashes($_POST['rat']); }
//Do all the magic stuff here
echo "Your rating for $comp of $rat is saved";
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment