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>
@tobystic
Copy link

tobystic commented Apr 4, 2020 •
edited
Loading

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