- 1

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

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.

31st Mar 2018, 12:37 AM
Pukhramabam Prameshwormani Singh
5 ответов
+ 9
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
31st Mar 2018, 1:28 AM
Toni Isotalo
Toni Isotalo - avatar
+ 7
@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.
31st Mar 2018, 5:36 AM
Fox
Fox - avatar
+ 2
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"); }
31st Mar 2018, 1:04 AM
Toni Isotalo
Toni Isotalo - avatar
- 1
@Toni Isotalo Thanks buddy
31st Mar 2018, 1:05 AM
Pukhramabam Prameshwormani Singh
- 1
@Toni Isotalo What about the hovering effect 😥? Pretty plizz...
31st Mar 2018, 1:17 AM
Pukhramabam Prameshwormani Singh