Skip to content
Jump to bottom

Star Rating #3

Merged
merged 1 commit into from Jul 15, 2019
+82 −0
Merged

Star Rating #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
82 star.html
View file
Open in desktop
@@ -0,0 +1,82 @@
<!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>