-
-
Save prof3ssorSt3v3/29e623d441e8174ffaef17741a1bba14 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Star Rating System</title> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| .star{ | |
| color: goldenrod; | |
| font-size: 2.0rem; | |
| padding: 0 1rem; /* space out the stars */ | |
| } | |
| .star::before{ | |
| content: '\2606'; /* star outline */ | |
| cursor: pointer; | |
| } | |
| .star.rated::before{ | |
| /* the style for a selected star */ | |
| content: '\2605'; /* filled star */ | |
| } | |
| .stars{ | |
| counter-reset: rateme 0; | |
| font-size: 2.0rem; | |
| font-weight: 900; | |
| } | |
| .star.rated{ | |
| counter-increment: rateme 1; | |
| } | |
| .stars::after{ | |
| content: counter(rateme) '/5'; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- alternate codepen version https://codepen.io/mad-d/pen/aJMPWr?editors=0010 --> | |
| <h1>Star Rating System</h1> | |
| <div class="stars" data-rating="3"> | |
| <span class="star"> </span> | |
| <span class="star"> </span> | |
| <span class="star"> </span> | |
| <span class="star"> </span> | |
| <span class="star"> </span> | |
| </div> | |
| <p>The number shown after the CSS is generated with a CSS counter.</p> | |
| <script> | |
| //initial setup | |
| document.addEventListener('DOMContentLoaded', function(){ | |
| let stars = document.querySelectorAll('.star'); | |
| stars.forEach(function(star){ | |
| star.addEventListener('click', setRating); | |
| }); | |
| let rating = parseInt(document.querySelector('.stars').getAttribute('data-rating')); | |
| let target = stars[rating - 1]; | |
| target.dispatchEvent(new MouseEvent('click')); | |
| }); | |
| function setRating(ev){ | |
| let span = ev.currentTarget; | |
| let stars = document.querySelectorAll('.star'); | |
| let match = false; | |
| let num = 0; | |
| stars.forEach(function(star, index){ | |
| if(match){ | |
| star.classList.remove('rated'); | |
| }else{ | |
| star.classList.add('rated'); | |
| } | |
| //are we currently looking at the span that was clicked | |
| if(star === span){ | |
| match = true; | |
| num = index + 1; | |
| } | |
| }); | |
| document.querySelector('.stars').setAttribute('data-rating', num); | |
| } | |
| </script> | |
| </body> | |
| </html> |
First of all, thank you for sharing this code, it works great! I am a newbie when it comes to jquery, but how do I make the star rating required for the user to fill in? I have tried to put it in a form and use , but that doesn't work.
Thanks again!
First of all, thank you for sharing this code, it works great! I am a newbie when it comes to jquery, but how do I make the star rating required for the user to fill in? I have tried to put it in a form and use , but that doesn't work.
Thanks again!
I never use jQuery. There is no jQuery in my samples, just plain JavaScript.
If you want to make something like this required then you need to check that you have a value for which star the user clicked when they submit the form. You will have a function that runs when the form is submitted and you need to add your code to check for the value inside that function.
Just having it inside a form will not do anything because these are not form input elements.
if you need to put the stars in the center of the page (margin center), you have to add it to the div tag above the star class. A div is a block element, and will apply across the width of the container unless a width is set. A span is an inline element, and will have the width of the text inside it, so applying this to the span in CSS sheet might not work
So line 38 above:
<div class="stars" data-rating="3">
<span class="star"> </span>
<span class="star"> </span>
<span class="star"> </span>
will become
<div style="text-align: center; class="stars" data-rating="3">
<span class="star"> </span>
<span class="star"> </span>
<span class="star"> </span>
Hope that helps someone
You just need to have something unique in the HTML that identifies each group. A different CSS classname works or combine two classnames.
<div class="stars one"> </div><div class="stars two"> </div>They are all "stars" groups but the "one" and "two" make the group unique.