Can anyone help me with a simple Simple Star 🌟 rating code?

Question

I want to rate an article with a five star rating system but as I'm stupid I didn't know how to write the code. Anyone who is kind hearted pliz do help me.

Thank you.

Answer 1

Make a class for your hovering effect
.starHover { background-color: blue };

Add these to every star
onmouseover="hover(this, true)";
onmouseleave="hover(this, false)";

var stars = document.getElementsByClassName("star");
function hover(star, hover) {
var id = parseInt(star.getAttribute("data-id"));
for(var a = 0; a < stars.length; a++) {
if(hover == false) {
stars[a].classList.remove("starHover");
} else if(hover == true){
if(a < id) {
stars[a].classList.add("starHover");
}
}
}
}

Untested

Answer 2

@Pukhramabam Prameshwormani Singh

Perhaps navigate to a site that implements what you're trying to accomplish, right-click the page, and select either "view source" or "inspect element". You will likely find plenty of examples via usage of this strategy.

Answer 3

I create five stars for you

<div class="star" data-id="1" onclick="rate(this)"></div>
<div class="star" data-id="2" onclick="rate(this)"></div>
<div class="star" data-id="3" onclick="rate(this)"></div>
<div class="star" data-id="4" onclick="rate(this)"></div>
<div class="star" data-id="5" onclick="rate(this)"></div>

function rate(star) {
var rate = star.getAttribute("data-id");
alert("You rated " + rate + " stars");
}

Answer 4

@Toni Isotalo Thanks buddy

Answer 5

@Toni Isotalo What about the hovering effect 😥? Pretty plizz...