{"id":113,"date":"2019-01-18T06:38:20","date_gmt":"2019-01-18T06:38:20","guid":{"rendered":"https:\/\/justinstolpe.com\/blog\/?p=113"},"modified":"2019-01-21T17:17:44","modified_gmt":"2019-01-21T17:17:44","slug":"5-star-rating-system-w-javascript-html-and-css","status":"publish","type":"post","link":"https:\/\/justinstolpe.com\/blog\/2019\/01\/18\/5-star-rating-system-w-javascript-html-and-css\/","title":{"rendered":"5 Star Rating System with JavaScript, HTML, and CSS"},"content":{"rendered":"<p><center><br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/HIuFfqeditU\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><br \/>\nIn this video we learn how to create a 5 star rating system using JavaScript, HTML, and CSS. JavaScript mainly runs the show here so this is also a good tutorial on JavaScript!<\/p>\n<p>This star rating system works like a rectangular progress bar with stars overlaid on top of is so it looks like a star rating system.<\/p>\n<h3><strong>Step 1: Get a Star Image<br \/>\n<\/strong><\/h3>\n<p>For this to work the star image needs to have a background, around the star out line of white. The inside of the star in the image needs to be transparent. Here is the image I used for this video.<\/p>\n<p><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/staroutline.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-114\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/staroutline.png\" alt=\"star outline\" width=\"100\" height=\"100\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Step 2: Code It Up!<\/strong><\/h3>\n<p>This star rating system mainly runs on JavaScript. The only HTML we will need will be a container element that the JavaScript can reference for writing the star system out to the DOM. The JavaScrtpt is setup to reference the DOM element by id. On page load, a new star rating system is created. When the new rating system gets created we can pass along a number of variables to specify how we want each rating system setup. Here is the code, I made lots of comments so it should be pretty easy to pick upon how the code works.<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n    &lt;head&gt;\r\n\t&lt;title&gt;Star Rating System&lt;\/title&gt;\r\n\t&lt;meta charset=\"utf-8\" \/&gt;\r\n\t&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script&gt;\r\n\t\t\/\/ create object\r\n\t\tvar starRating = ( function() {\r\n\r\n\t\t\t\/**\r\n\t\t\t * Constructor function\r\n\t\t\t *\r\n\t\t\t * @param Object args\r\n\t\t\t *\r\n\t\t\t * @return Object\r\n\t\t\t *\/\r\n\t\t\tvar starRating = function( args ) {\r\n\t\t\t\t\/\/ give us our self\r\n\t\t\t\tvar self = this;\r\n\r\n\t\t\t\t\/\/ set global vars for our object\r\n\t\t\t\tself.container = jQuery( '#' + args.containerId );\r\n\t\t\t\tself.containerId = args.containerId;\r\n\t\t\t\tself.starClass = 'sr-star' + args.containerId;\r\n\t\t\t\tself.starWidth = args.starWidth;\r\n\t\t\t\tself.starHeight = args.starHeight;\r\n\t\t\t\tself.containerWidth = args.starWidth * 5;\r\n\t\t\t\tself.ratingPercent = args.ratingPercent;\r\n\t\t\t\tself.newRating = 0;\r\n\t\t\t\tself.canRate = args.canRate;\r\n\r\n\t\t\t\t\/\/ draw the 5 star rating system out to the dom\r\n\t\t\t\tself.draw();\r\n\r\n\t\t\t\tif ( self.canRate ) { \/\/ do other things if user can rate\r\n\t\t\t\t\tif ( typeof args.onRate !== 'undefined' ) { \/\/ bind custom function\r\n\t\t\t\t\t\tself.onRate = args.onRate;\r\n\t\t\t\t    }\r\n\r\n\t\t\t\t\tjQuery( '.' + self.starClass ).on( 'mouseover', function() { \/\/ mouseover a star\r\n\t\t\t\t\t\t\/\/ determine the percent width on mouseover of any star\r\n\t\t\t\t\t\tvar percentWidth = 20 * jQuery( this ).data( 'stars' );\r\n\r\n\t\t\t\t\t\t\/\/ set the percent width  of the star bar to the new mouseover width\r\n\t\t\t\t\t\t$( '.sr-star-bar' + self.containerId ).css( 'width', percentWidth + '%' );\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\tjQuery( '.' + self.starClass ).on( 'mouseout', function() { \/\/ mouseout of a star\r\n\t\t\t\t\t\t\/\/ return the star rating system percent to its previous percent on mouse out of any star\r\n\t\t\t\t\t\tjQuery( '.sr-star-bar' + self.containerId ).css( 'width', self.ratingPercent );\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\tjQuery( '.' + self.starClass ).on( 'click', function() { \/\/ click on a star\r\n\t\t\t\t\t\t\/\/ ner rating set to the number of stars the user clicked on\r\n\t\t\t\t\t\tself.newRating = jQuery( this ).data( 'stars' );\r\n\r\n\t\t\t\t\t\t\/\/ determine the percent width based on the stars clicked on\r\n\t\t\t\t\t\tvar percentWidth = 20 * jQuery( this ).data( 'stars' );\r\n\r\n\t\t\t\t\t\t\/\/ new rating percent is the number of stars clicked on\r\n\t\t\t\t\t\tself.ratingPercent = percentWidth + '%';\r\n\r\n\t\t\t\t\t\t\/\/ set new star bar percent width\r\n\t\t\t\t\t\t$( '.sr-star-bar' + self.containerId ).css( 'width', percentWidth + '%' );\r\n\r\n\t\t\t\t\t\t\/\/ run the on rate function passed in when the object was created\r\n\t\t\t\t\t\tself.onRate();\r\n\t\t\t\t\t} );\t\r\n\t\t\t\t}\r\n\t\t\t};\r\n\r\n\t\t\t\/**\r\n\t\t\t * Draw html out to the page\r\n\t\t\t *\r\n\t\t\t * @param void\r\n\t\t\t *\r\n\t\t\t * @return void\r\n\t\t\t *\/\r\n\t\t\tstarRating.prototype.draw = function() {\r\n\t\t\t\tvar self = this;\r\n\t\t\t\tvar pointerStyle = ( self.canRate ? 'cursor:pointer' : '' );\r\n\t\t\t\tvar starImg = '&lt;img src=\"staroutline.png\" style=\"width:' + self.starWidth + 'px\" \/&gt;';\r\n\t\t\t\tvar html = '&lt;div style=\"width:' + self.containerWidth + 'px;height:' + self.starHeight + 'px;position:relative;' + pointerStyle + '\"&gt;';\r\n\r\n\t\t\t\t\/\/ create the progress bar that sits behinde the png star outlines\r\n\t\t\t\thtml += '&lt;div class=\"sr-star-bar' + self.containerId + '\" style=\"width:' + self.ratingPercent + ';background:#FFD700;height:100%;position:absolute\"&gt;&lt;\/div&gt;';\r\n\r\n\t\t\t\tfor ( var i = 0; i &lt; 5; i++ ) { \/\/ add each star to the page\r\n\t\t\t\t\tvar currStarStyle = 'position:absolute;margin-left:' + self.starWidth * i + 'px';\r\n\t\t\t\t\thtml += '&lt;div class=\"' + self.starClass + '\" data-stars=\"' + ( i + 1 ) + '\" style=\"' + currStarStyle + '\"&gt;' + \r\n\t\t\t\t\t\tstarImg + \r\n\t\t\t\t\t'&lt;\/div&gt;';\r\n\t\t\t\t}\r\n\r\n\t\t\t\thtml += '&lt;\/div&gt;';\r\n\r\n\t\t\t\t\/\/ write out to the dom\r\n\t\t\t\tself.container.html( html );\r\n\t\t\t};\r\n\r\n\t\t\t\/\/ return it all!\r\n\t\t\treturn starRating;\r\n\t\t} )();\r\n\r\n\t\t$( function() {\r\n\t\t\tvar rating = new starRating( { \/\/ create first star rating system on page load\r\n\t\t\t\tcontainerId: 'star_rating', \/\/ element id in the dom for this star rating system to use\r\n\t\t\t\tstarWidth: 100, \/\/ width of stars\r\n\t\t\t\tstarHeight: 100, \/\/ height of stars\r\n\t\t\t\tratingPercent: '50%', \/\/ percentage star system should start \r\n\t\t\t\tcanRate: true, \/\/ can the user rate this star system?\r\n\t\t\t\tonRate: function() { \/\/ this function runs when a star is clicked on\r\n\t\t\t\t\tconsole.log( rating );\r\n\t\t\t\t\talert('You rated ' + rating.newRating + ' starts' );\r\n\t\t\t\t}\r\n\t\t\t} );\r\n\r\n\t\t\tvar rating2 = new starRating( { \/\/ create second star rating system on page load\r\n\t\t\t\tcontainerId: 'star_rating2', \/\/ element id in the dom for this star rating system to use\r\n\t\t\t\tstarWidth: 100, \/\/ width of stars\r\n\t\t\t\tstarHeight: 100, \/\/ height of stars\r\n\t\t\t\tratingPercent: '20%', \/\/ percentage star system should start \r\n\t\t\t\tcanRate: true, \/\/ can the user rate this star system?\r\n\t\t\t\tonRate: function() { \/\/ this function runs when a star is clicked on\r\n\t\t\t\t\tconsole.log( rating2 );\r\n\t\t\t\t\talert('You rated ' + rating2.newRating + ' starts' );\r\n\t\t\t\t}\r\n\t\t\t} );\r\n\t\t} );\r\n\t&lt;\/script&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n\t&lt;!-- first continer element for the first star rating system--&gt;\r\n\t&lt;div id=\"star_rating\"&gt;\r\n\t&lt;\/div&gt;\r\n\r\n\t&lt;br \/&gt;\r\n\t&lt;br \/&gt;\r\n\r\n\t&lt;!-- second continer element for the first star rating system--&gt;\r\n\t&lt;div id=\"star_rating2\"&gt;\r\n\t&lt;\/div&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Run code and you should see two fully functional 5 Star Rating systems like in the image below!<\/p>\n<p><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/5-Star-Rating-System-Browser.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-115\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/5-Star-Rating-System-Browser.png\" alt=\"5 Star Rating System Browser\" width=\"1442\" height=\"724\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/5-Star-Rating-System-Browser.png 1442w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/5-Star-Rating-System-Browser-300x151.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/5-Star-Rating-System-Browser-768x386.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/5-Star-Rating-System-Browser-1024x514.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>Here are some helpful links relating to this blog post.<\/p>\n<p><a href=\"https:\/\/www.justinstolpe.com\/blog_code\/star_rating\/\" target=\"_blank\" rel=\"noopener\"><strong>Live Demo<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=HIuFfqeditU&amp;feature=\" target=\"_blank\" rel=\"noopener\"><strong>YouTube Video<\/strong><\/a><\/p>\n<p><strong><a href=\"https:\/\/github.com\/jstolpe\/blog_code\/tree\/master\/star_rating\" target=\"_blank\" rel=\"noopener\">Code on GitHub<\/a><\/strong><\/p>\n<p>That is going to do it for this post! Leave any comments\/questions\/concerns below and thanks for stopping by the blog!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this video we learn how to create a 5 star rating system using JavaScript, HTML, and CSS. JavaScript mainly runs the show here so this is also a good tutorial on JavaScript! This star rating system works like a rectangular progress bar with stars overlaid on top of is so it looks like a &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/justinstolpe.com\/blog\/2019\/01\/18\/5-star-rating-system-w-javascript-html-and-css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;5 Star Rating System with JavaScript, HTML, and CSS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":117,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,11,10,12,9],"tags":[7,15,13,14,8],"class_list":["post-113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-css","category-html","category-javascript","category-php","tag-coding","tag-css","tag-html","tag-javascript","tag-php"],"_links":{"self":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":4,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/113\/revisions\/120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media\/117"}],"wp:attachment":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}