I'm seeking a solution to dynamically display a star rating in Spring Boot/Java without specifying a fixed value. While I can show star ratings with a set value, how can I update the rating based on an average of user ratings? Most tutorials only cover accepting input for a star rating or displaying static stars.
Currently, I'm using this placeholder to show 4.3 stars:
<div class="Stars" style="--rating: 4.3;" aria-label="Rating of this product is 4.3 out of 5."></div>
I want to pass the variable name (average user rating) from the controller to display the actual rating. How can I achieve this? Appreciate any assistance.
Also, adding the style.css file here—it determines star fill based on --rating but I'm unsure how to pass the variable. I may not need the aria-label either.
.Stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
font-size: var(--star-size);
font-family: Times;
line-height: 1;
}
.Stars::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}