Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/stars.html

Created March 12, 2018 18:09
Show Gist options
  • Save prof3ssorSt3v3/29e623d441e8174ffaef17741a1bba14 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/29e623d441e8174ffaef17741a1bba14 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stars.html
<!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">&nbsp;</span>
<span class="star">&nbsp;</span>
<span class="star">&nbsp;</span>
<span class="star">&nbsp;</span>
<span class="star">&nbsp;</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>
@prof3ssorSt3v3
Copy link
Author

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.

@tobystic
Copy link

tobystic commented Apr 4, 2020 •
edited

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">&nbsp;</span>
        <span class="star">&nbsp;</span>
        <span class="star">&nbsp;</span>

will become

<div style="text-align: center; class="stars" data-rating="3">
        <span class="star">&nbsp;</span>
        <span class="star">&nbsp;</span>
        <span class="star">&nbsp;</span>

Hope that helps someone

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment