Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

340CT-Resit/star.html

Go to file
 
 
Cannot retrieve contributors at this time
82 lines (75 sloc) 2.44 KB
Raw Blame
Open 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>
<h1>Star Rating </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>
<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>