Creating a five-star rating system
In this task, we will learn how to build a five-star rating system. This feature is often used by e-commerce websites to allow the rating of products, articles, or anything that is worth evaluating by the user.
Getting ready
Let's prepare a dummy PHP file ajax/saveRating.php
to confirm the rating was saved:
<?php $result = array(); $result["status"] = ""; $result["message"] = ""; if(isset($_POST["itemID"]) && isset($_POST["itemValue"])){ $result["status"] = "OK"; $result["message"] = "Rating has been saved successfully."; } else { $result["status"] = "ERROR"; $result["message"] = "Provide itemID and itemValue!"; } echo json_encode($result); ?>
We need to prepare a .gif
image with stars. This .gif
includes three variations of the star: the first,for the inactive star, the second, for an "on hover" event, and the third for the active star.
How to do it...
We are ready to start with the HTML part:
<body> <h1>Creating Five Stars...