Rating
Full stars 'No rating' option
<div id="full-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" name="rating" id="rating-none" value="0" type="radio">
<label aria-label="No rating" class="rating__label" for="rating-none"><i class="rating__icon rating__icon--none fa fa-ban"></i></label>
<label aria-label="1 star" class="rating__label" for="rating-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-3" value="3" type="radio" checked>
<label aria-label="4 stars" class="rating__label" for="rating-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-5" value="5" type="radio">
</div>
</div>
Half stars Space on left side to select 0 stars
<div id="half-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
<label aria-label="0 stars" class="rating__label" for="rating2-0"> </label>
<label aria-label="0.5 stars" class="rating__label rating__label--half" for="rating2-05"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-05" value="0.5" type="radio">
<label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-10" value="1" type="radio">
<label aria-label="1.5 stars" class="rating__label rating__label--half" for="rating2-15"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-15" value="1.5" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-20" value="2" type="radio">
<label aria-label="2.5 stars" class="rating__label rating__label--half" for="rating2-25"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-25" value="2.5" type="radio" checked>
<label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-30" value="3" type="radio">
<label aria-label="3.5 stars" class="rating__label rating__label--half" for="rating2-35"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-35" value="3.5" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-40" value="4" type="radio">
<label aria-label="4.5 stars" class="rating__label rating__label--half" for="rating2-45"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-45" value="4.5" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-50" value="5" type="radio">
</div>
</div>
Full stars Must select a star value
<div id="full-stars-example-two">
<div class="rating-group">
<input disabled checked class="rating__input rating__input--none" name="rating3" id="rating3-none" value="0" type="radio">
<label aria-label="1 star" class="rating__label" for="rating3-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating3-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating3-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-3" value="3" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating3-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating3-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-5" value="5" type="radio">
</div>
</div>
Change confirm button text and class
<div class="outer-container">
<div class="star-container">
<i class="fa fa-star star" id="star0"></i>
<i class="fa fa-star star" id="star1"></i>
<i class="fa fa-star star" id="star2"></i>
<i class="fa fa-star star" id="star3"></i>
<i class="fa fa-star star" id="star4"></i>
<i class="fa fa-star star" id="star5"></i>
<i class="fa fa-star star" id="star6"></i>
<i class="fa fa-star star" id="star7"></i>
<i class="fa fa-star star" id="star8"></i>
<i class="fa fa-star star" id="star9"></i>
</div>
<br>
<div class="face-container">
<i class="ri-emotion-unhappy-line face" style="position: absolute; color: #B71C1C;" id="sadface"></i>
<i class="emotion-normal-line face" style="position: absolute; color: gold;" id="neutralface"></i>
<i class="ri-emotion-line face" style="position: absolute; color: #519E67;" id="happyface"></i>
<i class="ri-emotion-line face" style="opacity: 0; font-size: 0px; margin: 0px; transition: font-size 0.3s cubic-bezier(0.45, 0, 0.55, 1), margin 0.3s cubic-bezier(0.45, 0, 0.55, 1);"
id="placeholderFace"></i>
</div>
<br>
</div>
<script>
let stars = [],
starFocus = [];
let rating = -1;
let ignorePointer = false;
let red = '#B71C1C';
let yellow = 'gold';
let green = '#519E67';
for (let i = 0; i < 10; i++) {
stars.push(document.getElementById("star" + i));
starFocus.push(false);
}
for (let i = 0; i < stars.length; i++) {
document.getElementById("star" + i).onmouseover = function () {
for (let j = 0; j <= i; j++) {
focusStar(j, i);
}
};
document.getElementById("star" + i).onmouseout = function () {
for (let j = 0; j <= i; j++) {
if (j >= rating) {
unfocusStar(j);
}
}
};
document.getElementById("star" + i).onclick = function () {
if (!ignorePointer) {
if (rating == -1) {
document.getElementById('placeholderFace').style.fontSize = "128px";
document.getElementById('placeholderFace').style.margin = "16px";
}
ignorePointer = true;
staggeredAnimation(i);
rating = i + 1;
setTimeout(() => {
ignorePointer = false;
}, 1000);
}
};
}
function focusFace(face) {
document.getElementById(face).style.transform = "scale(1.2)";
document.getElementById(face).style.opacity = "1";
}
function unfocusFace(face) {
document.getElementById(face).style.transform = "scale(1)";
document.getElementById(face).style.opacity = "0";
}
function focusStar(j, vote) {
if (!starFocus[j]) {
document.getElementById("star" + j).style.color = (vote < 6) ? red : ((vote >= 6 && vote < 8) ? yellow : green);
document.getElementById("star" + j).style.transform = "scale(1.2)";
document.getElementById("star" + j).style.filter = "drop-shadow(0 8px 5px rgba(0, 0, 0, 0.2))";
starFocus[j] = true;
}
}
function unfocusStar(j) {
if (starFocus[j]) {
document.getElementById("star" + j).style.color = "gainsboro";
document.getElementById("star" + j).style.transform = "scale(1)";
document.getElementById("star" + j).style.filter = "drop-shadow(0 4px 3px rgba(0, 0, 0, 0.2))";
starFocus[j] = false;
}
}
function staggeredAnimation(i) {
/// UNFOCUS ANIMATION
let k = rating;
let intervalID2 = setInterval(function () {
if (k < i + 1) {
clearInterval(intervalID2);
if (i < 6) {
focusFace("sadface");
unfocusFace("neutralface");
unfocusFace("happyface");
} else if (i >= 6 && i < 8) {
focusFace("neutralface");
unfocusFace("sadface");
unfocusFace("happyface");
} else {
focusFace("happyface");
unfocusFace("sadface");
unfocusFace("neutralface");
}
/// WHEN UNFOCUS ANIMATION FINISHES, PULSE ANIMATION STARTS
let j = 0;
let intervalID = setInterval(function () {
if (j > i) {
clearInterval(intervalID);
} else {
pulseEffect(j);
document.getElementById("star" + j).style.color = (i < 6) ? red : ((i >= 6 && i < 8) ? yellow : green);
j++;
}
}, 100);
} else {
unfocusStar(k);
k--;
}
}, 100);
}
function pulseEffect(j) {
document.getElementById("star" + j).style.transform = "scale(1.4)";
setTimeout(() => {
document.getElementById("star" + j).style.transform = "scale(1.2)";
}, 200);
}
</script>