[RAILS] Display the average value of the evaluation as a star

Describes how to display the average value of each store's evaluation on the list display page! The image looks like this. 1b1a25ccb85f56b8e0a1b46837bd6cd6.png

This implementation is Farstep [Programming Course] [[Ruby on Rails] Let's create a star review function (PART1) How To Create a Star Rating with Ruby on Rails](https://www.youtube.com/watch? v = NOOYABsAip0) is used as a reference.

usage environment

ruby 2.6.5 Ruby on Rails I am using Bootstrap 4 with some margins specified.

Implementation details

Model implementation


class Laundry < ApplicationRecord
  def avg_score
    unless self.comments.empty?
 def avg_score_percentage
   unless self.comments.empty?

First, the average value is calculated if the comment exists according to whether it is empty or not. Use the average method to get the average value of the column names. Round (1) `` to round off to the second decimal place.

The avg_score_percentage method calculates the percentage and passes it to the view.

View implementation

The code is below.


<div class="average-score mb-3">
 <div class="star-rating ml-2">
   <div class="star-rating-front" style="width: <%= laundry.avg_score_percentage %>%">★★★★★</div>
   <div class="star-rating-back">★★★★★</div>
 <div class="average-score-display">
   (<%= laundry.avg_score %>point)


.average-score {
  display: flex; //★ and points side by side
  justify-content: center;

.star-rating {
  position: relative;
  width: 5em;
  height: 1em;
  font-size: 17px;

.star-rating-front {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; //Hide the part that extends beyond the specified width.
  white-space: nowrap; //Avoid wrapping when the width is not enough.
  color: #ffcc33;
  height: 25px;
.star-rating-back {
  color: #ccc;

We will implement by preparing two 5 stars (★★★★★) and superimposing the two. ・ .Star-rating-front ・ ・ ・ Specify the width by overlaying the yellow star part on top of it with "width: <% = laundry.avg_score_percentage%>%. ・ .Star-rating-back ・ ・ ・ The gray star part, the part that did not turn yellow by placing it below is filled.

I think the following two points are the points.

  1. Specify overflow: hidden;. By specifying overflow: hidden;, the part outside the specified width is hidden and the gray star behind is displayed. If you do not specify this, even if you specify the width, the part that extends beyond the width is not hidden, so it will always be evaluated as 5 stars. overflow: hidden; none 2609974bbcd16eb7c656c6b0494fe206.png

  2. By setting white-space: nowrap;, it will not wrap when the width is not enough. By specifying this, the score after the decimal point will also be reflected in the star. white-space: nowrap; Yes 44bdcca4dc3ecd2c6133f7dd72db666b.png

white-space: nowrap; none ea00e4658620d7173e5f742fd6b5a946.png

You can now display the average rating as a star!

Recommended Posts

Display the average value of the evaluation as a star
Create a Yellowfin custom formatter and display the minus of the number as △ (triangle)
How to find the total value, average value, etc. of a two-dimensional array (multidimensional array)-java
Takes out the HashMap value and returns the result sorted by the value of value as a list.
Pass arguments to the method and receive the result of the operation as a return value
Determine that the value is a multiple of 〇 in Ruby
How to display 0 on the left side of the standard input value
A memorandum of the FizzBuzz problem
Let's create a TODO application in Java 5 Switch the display of TODO
[Ruby] Display the contents of variables
Sample program that returns the hash value of a file in Java
How to change the value of a variable at a breakpoint in intelliJ
Display text on top of the image
Samshin on the value of the hidden field
Ability to display a list of products
Find the difference from a multiple of 10
Get the path defined in Controller class of Spring boot as a list
Set the source of the library set as a dependency in IntelliJ as a separate module of the project
Make a margin to the left of the TextField
Measure the size of a folder in Java
Set the time of LocalDateTime to a specific time
[Ruby] Code to display the day of the week
How to display the result of form input
Specify the default value with @Builder of Lombok
[Ruby on Rails] Ranking display (total, average value)
[Jackson] A story about converting the return value of BigDecimal type with a custom serializer.
[Rails] I want to display the link destination of link_to in a separate tab
Sample code to assign a value in a property file to a field of the expected type
[Java] The problem that true was returned as a result of comparing Integer with ==