install @buuug7/simplify-star-rating
package via npm, and then import from @buuug7/simplify-star-rating/index.css
file.
npm install @buuug7/simplify-star-rating
default
<div class="star-rating" id="star-rating-1">
<span class="star fill"></span>
<span class="star fill"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
large
<div class="star-rating" id="star-rating-2">
<span class="star lg fill"></span>
<span class="star lg fill"></span>
<span class="star lg"></span>
<span class="star lg"></span>
<span class="star lg"></span>
</div>
interact with javascript
function initStar(selector) {
const starRating = document.querySelector(selector);
starRating.querySelectorAll(".star").forEach((node) => {
node.addEventListener("click", (e) => {
const target = e.target;
const haveFill = target.classList.contains("fill");
haveFill ? target.classList.remove("fill") : target.classList.add("fill");
});
});
}
initStar("#star-rating-1");