What is the best way to showcase a product's star rating using a variable or input from the user?

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;
}

Answer №1

If you're utilizing Thymeleaf, here is a sleek way to display product ratings:

<div class="Stars">
<p style="--rating: 4.3;" th:text="The average user rating is ${the_average_user_rating} out of 5."></p>
</div>

Feel free to customize the rating value dynamically by passing different names from the controller.

Answer №2

For anyone facing a similar question in the future, I managed to resolve it using the following method:

<div class="Star-ratings" th:style="|--rating: ${averageRating}|" >
</div>

The averageRating value is passed through the controller.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for managing content and tables that exceed their container's boundaries

On my webpage, I have a slide-out sidebar that shifts the other contents and causes overflow with a scrollbar. I want the content to remain inside the window and adjust according to the available space. Image of Slide-out Sidebar As seen in the image, t ...

Minimize ring size through mesmerizing smoke effects

I came across this stunning ring with a captivating smoke animation, but I am struggling to comprehend its design fully. My goal is to resize the ring to about 80px and maintain only a single color throughout. However, my attempts to simply reduce the siz ...

After toggling the class, Jquery will no longer select the button

I am having an issue with my jQuery code where I have a button that, when clicked, should switch classes from #testButton to .first or .second. The image toggle shows that the first click works fine and toggles the image, but the second click does not seem ...

Connecting a saved link to a picture located in another document using HTML

Hey there! I'm currently working on including an image with the following code: <p class="b1"> <img id="cakes" src="~/images/cakesBanner.png" alt="cakes"> </p> In a different file, I have the following code: <div class="nav ...

Angular and Bootstrap combined to create a versatile navigation bar with a collapsible sidebar feature

Currently, I am in the process of developing a progressive web app using Angular and Bootstrap. One of the main challenges I am facing is implementing a navbar that not only looks great on desktop but also on mobile devices. So far, I am satisfied with my ...

I have a specific resolution in mind where I want to run jQuery code during window scrolling

I have a jQuery code that I want to run only when the resolution is greater than 950px. If not, I risk losing the responsive logo. My goal is to create a navigation bar similar to the one on the Lenovo homepage. $(document).ready(function(){ //left ...

Sending various array data via AngularJS

Welcome to the HTML page view where users can input data and send it to an API. https://i.sstatic.net/uJTYc.png Within the form, three parameters need to be passed in a single array: day, fromtime, and to-time. How can these three parameters be passed in ...

The consequences of setting JDBC AutoCommit to false without defining explicit transaction boundaries

Imagine a scenario where a Java application is establishing JDBC Connections to interact with a Postgres database, while keeping AutoCommit disabled. In this setup, if we run SQL SELECT queries on these JDBC Connections, what impact does it have on transa ...

What is the best way to extract decimal values such as 0.00000000 from an Excel spreadsheet using Java with Selenium?

I'm working with a column called BuyQuantity which contains values like the ones listed below: BuyQuantity 0.00000000 0.00000001 0.00000002 0.00000003 0.00000004 0.00000005 My goal is to extract the exact values shown above and compare them with som ...

What is the best way to move the Grid upward when the above content is not visible?

Let me demonstrate what I have been working on. Currently, I am creating a weather application to explore the functionalities of https://material-ui.com/. I am attempting to prototype an animation inspired by Google Flights, which can be seen here: https: ...

When crafting an XPATH expression, I am able to navigate within the #document element. Within this element, I must specify the path to the HTML body of my web page

I need assistance with my HTML page, can someone please help? Here is the XPath code I am using: (//span[text()='Information']//following::div[contains(@class,'edit-area')])[1]/iframe However, when I run my script, it says that there ...

Using SVG sprites from external sources alongside child nodes

I am working on a website that contains multiple SVG icons and an SVG logo that need to be animated. To improve readability, I have implemented a sprite system using an external file. For loading the sprites, I am utilizing XMLHttpRequests at the start o ...

Using the Bootstrap grid system beyond the boundaries of the div container

Struggling to place 2 input elements inside a bootstrap grid, I noticed they are positioned outside the div container, either to the left or right side. Despite my attempts, the code seems fine: <div style="max-width:500px;margin:auto;"> <di ...

Expanding a div's size with CSS to fill the remaining space

Here's the setup I'm working with: <div class="parent"> <div class="moverBoy"></div> <div class="smartBoy"></div> </div> The parent element is fixed at 100x20 indefinitely. moverBoy and smartBoy are al ...

jQuery slideToggle effect causes neighboring elements to move

After clicking on the element I've set as the trigger for slideToggle, it moves a few pixels to the right without any apparent cause. It seems like there might be an issue with the CSS, but I'm having trouble pinpointing the exact problem. You c ...

Setting various comparators for individual table columns can be achieved through Eclipse plugins

As I develop generic classes for upcoming Eclipse plugins, one of my goals is to incorporate a table viewer into a view. I am aiming to create various comparison methods tailored to different columns within the table. MyComparator comparator = new MyComp ...

Error encountered when converting types in a generic function

I am currently in the early stages of learning about Generics. In my exploration, I encountered a challenge when attempting to assign the value of a global object to that of a local object. Unfortunately, I ran into a type conversion error. What is causing ...

Negative top margin in IE9 causes an element to become stuck when a floated and cleared child element is present

I have encountered an unusual issue in IE9 and I have spent a significant amount of time trying to track it down and replicate it. Here is the code snippet that we are working with: <div class="container"> <div class="movable"> &l ...

The sdkmanager consistently provides the same output, regardless of the arguments supplied to it

After downloading the SDK Tools for Windows and attempting to run it, I encountered a persistent issue. No matter which command I used (sdkmanager, sdkmanager --list, sdkmanager --version, sdkmanager asdoifjasodjfoas), the same block of text was always pri ...

What is the best way to evenly distribute input elements horizontally within the parent container?

I am working on a layout with five select inputs that I want to arrange horizontally within the parent div. However, the current code setup is not achieving the desired layout: <div id="divtable"> <select class="abc"></select> ...