-
-
Save yehchge/7fc56449261bf3f916ae6e60ef4d11e7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment