Skip to content

Instantly share code, notes, and snippets.

@nidri

nidri/index-starratings.html

Last active June 5, 2020 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nidri/1aecd662533e2797aff56a0998f54025 to your computer and use it in GitHub Desktop.
Save nidri/1aecd662533e2797aff56a0998f54025 to your computer and use it in GitHub Desktop.
Download ZIP
Star Ratings
Raw
index-starratings.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star Rating</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="ratings-wrapper">
<form>
<div class="qset">
<p id="q1">
How do you rate the product?
</p>
<div class="ratings">
<input type="hidden" name="q1a1" id="q1a1">
<span class="rating" data-rating="5">☆</span>
<span class="rating" data-rating="4">☆</i></span>
<span class="rating" data-rating="3">☆</i></span>
<span class="rating" data-rating="2">☆</i></span>
<span class="rating" data-rating="1">☆</i></span>
</div>
</div>
<div class="qset">
<p id="q2">
How do you rate the response from customer support?
</p>
<div class="ratings">
<input type="hidden" name="q2a2" id="q2a2">
<span class="rating" data-rating="5">☆</span>
<span class="rating" data-rating="4">☆</i></span>
<span class="rating" data-rating="3">☆</i></span>
<span class="rating" data-rating="2">☆</i></span>
<span class="rating" data-rating="1">☆</i></span>
</div>
</div>
<div class="qset">
<p id="q3">
How do you rate the service provided?
</p>
<div class="ratings">
<input type="hidden" name="q3a3" id="q3a3">
<span class="rating" data-rating="5">☆</span>
<span class="rating" data-rating="4">☆</i></span>
<span class="rating" data-rating="3">☆</i></span>
<span class="rating" data-rating="2">☆</i></span>
<span class="rating" data-rating="1">☆</i></span>
</div>
</div>
<div class="qset">
<p id="q3">
Do you like to shop again?
</p>
<div class="ratings">
<input type="hidden" name="q3a3" id="q3a3">
<span class="rating" data-rating="5">☆</span>
<span class="rating" data-rating="4">☆</i></span>
<span class="rating" data-rating="3">☆</i></span>
<span class="rating" data-rating="2">☆</i></span>
<span class="rating" data-rating="1">☆</i></span>
</div>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
function selectStar(e) {
// Get parent and set rating on data-rating attribute
const parent = this.parentNode;
const input = parent.querySelector("input");
const rating = this.dataset.rating;
// Remove existing rating and clear checked attribute
if(typeof parent.dataset.rating !== undefined) {
console.log("Removing current rating");
parent.querySelectorAll(".rating").forEach((star) => {
star.classList.remove("checked");
});
}
input.value = rating;
this.parentNode.dataset.rating = rating;
this.classList.toggle("checked");
}
document.querySelectorAll(".rating").forEach((item) => {
item.addEventListener("click", selectStar);
});
Raw
styles.css
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-webkit-font-smoothing: antialiased;
-mpz-osx-font-smoothing: grayscale;
}
.container {
padding: 2em;
margin: auto;
}
.rating {
font-size: 3em;
margin: 0 0.1em;
unicode-bidi: bidi-override;
direction: rtl;
position: relative;
cursor: pointer;
}
/* On hover and checked select current and stars before */
.rating:hover::before,
.rating:hover ~ .rating::before,
.rating.checked::before,
.rating.checked ~ .rating::before {
content: "\2605";
position: absolute;
color: #FF6F00;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment