CSS ratings bar styling

Looking to create a unique ratings bar for my website, I have some questions that need answering. Take a look at the codepen link to see what I've come up with so far.

My main query is about incorporating two different colors for Likes (green) and Dislikes (red) within the same bar, similar to YouTube's rating system. How can I achieve this separation while maintaining one cohesive bar?

Secondly,

I'm working with Rails (no Rails expertise required for your response), and my code for displaying Likes is <%= @movies.likes.size %> (e.g. 5000) and Dislikes is 

<%= @movies.dislikes.size %>
(e.g. 3000). With such large numbers for the width percentage, how can I adjust it proportionally to accurately fit the bar? Thank you for your help.

cssprogress-barrating

Answer №1

If one were to determine the like ratios, the following formula might be employed:

100*likes/(likes+dislikes)

In regards to the initial inquiry, what prevented you from simply assigning a red background color to .meter-slim?

Answer №3

To customize the appearance of dislikes in the .meter-slim element, adjust the background-color property to your preferred color. Similarly, modify the background-color for likes by targeting .meter-slim .purple and changing it to your desired shade (such as green).

If needed, consider renaming the class from purple to a more fitting label, like green.

For determining the percentage value (like the 85% example), use the formula: 100*likes/(likes+dislikes)

EDIT: In response to our discussion, I wanted to elaborate further.

Since my Ruby experience is limited to a few instances ten years ago, my memory is not sharp. Instead of enclosing everything in <%= %>, a better suggestion would be creating a variable (e.g., percent_upvotes) and then utilizing "width: <%= @percent_upvotes %>%" in your view.

To calculate this value and save it in percent_upvotes, one approach could involve extracting the upvote-to-vote ratio in your SQL query. For instance...

SELECT (upvotes/votes) AS percent_upvotes FROM your_table

Alternatively, in Ruby...

percent_upvotes = (movies.upvotes.size.to_f / movies.votes.size.to_f ) * 100.0

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

How to Alter the Color of a Hyperlink in HTML

I've been working on an angular2 application and I'm using a hyperlink to trigger a method that opens a small popup window. I've tried different methods to change the color of the link when it's clicked, but so far none have worked. Th ...

htmlcssangular

Come up with various transition animations for multiple child elements that activate when the cursor hovers over the parent element

I have a CSS & HTML code snippet that looks like this: .item-video-kami { width: 480px; overflow: hidden; position: relative; } .item-video-kami>.play-icon.full-height>svg { width: 106px; color: #ffffff50; } .item-video-kami img { ...

htmlcss

Switch the style of a set of thumbnail images when clicked

I am working with a set of thumbnails where one has an "p7_current" class applied, giving it a border, while the rest have an "p7_inactive" class removing the border. My goal is to have the last clicked thumbnail in a group of 6 to have the "p7_current" c ...

javascriptjqueryhtmlcss

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

javascriptjqueryhtmlcssajax

The two <p> elements are being pushed to the right column, which is not their intended display

A snippet of less.css code is available at this link: #content { overflow: hidden; width: 100%; p { float: left; width: 465px; padding: 0px 25px 0px 35px; margin: 0px; br { line-height: 2. ...

htmlcsscss-floatless

Elements that do not change when hovered over and that intersect

In the provided example, I am attempting to decrease the opacity of non-hover elements on an HTML page. The code snippet below successfully reduces the opacity of non-overlapping elements. However, when there is a background element that overlaps and shou ...

htmlcss

user1234: I'm interested in decreasing the amount of items shown on the screen when it's smaller

Currently working on the design of the Search page for an online store. I aim to adjust the number of items displayed on the screen gradually as the screen size changes, similar to Amazon's layout. Additionally, I'm looking to rectify the excess ...

htmlcssbootstrap-5

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform

Creating a Click Counter with jQuery 2.0.1/2.0.2: A Step-by-Step Guide

Currently in the process of creating a fundraising webpage for charity, I have chosen to display an animated rabbit making its way Around The World. My progress so far includes a non-looping gif that plays on click, with a limitation on how often it can b ...

javascripthtmlcssonclickclick-counting

Using data variables as arguments in the style section of Vue2

Suppose we have a data variable and I want to utilize this data variable for styling purposes. data() { return{ selected:{ index: 2 } } } <style> .parent-table >>> .table-row:nth-child(/* here I intend to use ...

javascriptjquerycssvuejs2vuetify.js

Ways to ensure the text on my website scrolls into view as the user navig

Is there a way to have my text show up as I scroll? I came across this , but I'm interested in how it actually functions. I saw a similar inquiry before, but it doesn't make sense to me. Can someone please explain or provide some examples on how ...

javascriptjqueryhtmlcss

Add the application's logo image to the Ionic header along with a side menu

When attempting to place the app logo image in the center or left of the Ionic header with vertical alignment, it seems to shift to the top instead. The code I am currently using to display the logo is causing some issues: <ion-view view-title="<im ...

htmlcssionic-frameworkcss-position

Tips for eliminating the default margin without using a float

Exploring the world of divs and buttons led me to an interesting discovery: removing a float creates a natural margin. Upon entering this styling: body { background: gray; } button { font-size: 17px; color: white; margin-l ...

htmlcss

A new version of Primefaces has been released, introducing a sleek button feature with

How can I utilize the Primefaces version 10 button with a Font Awesome icon, resizing the icon without displaying the words ui:button? A and B are tests that I can resize successfully, but they are not buttons. C and D are buttons where the icon is resize ...

cssprimefaces

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

javascriptjqueryhtmlcssnav

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap, or flex without altering the or ...

htmlcsstwitter-bootstrap-3flexboxgrid

View-only text area and Internet Explorer version 9 scroll bars

I'm encountering an issue with setting the readonly attribute on textareas. I am using JQuery to apply the attribute, as shown here: $("#mytextarea").prop("readonly", true); For CSS styling: textarea { width: 400px; height: 400px; } textarea[readon ...

jqueryhtmlcsstextarea

Instructions for placing the navigation links below the navigation brand

Could you please advise me on how to center the navigation links below the brand logo? I am new to coding and just starting out. Here is a link to a page that demonstrates what I am trying to achieve: In this example, the brand name is "a fork and a pe ...

htmlcssbootstrap-4

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

javascriptjquerycsshtml

Ways to position a child element at the center of its parent container?

Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other ...

htmlcss