Tips for changing the background color depending on the value

Question

Tips for changing the background color depending on the value

I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To visually represent this, I want the background color to become darker red for teams that performed worse and darker green for teams that performed better.

For instance:

Team A finished 1st but was seeded 3rd -> light green
Team B finished 2nd yet they were seeded 30th -> dark green
Team C finished 10th after being seeded 8th -> light red
Team D finished in 30th place despite having been seeded 1st -> dark red

I also want to establish a threshold so that teams that over or underperformed by a certain margin will have the same intensity of color.

While my website is created using Angular, I wonder if achieving this effect can be as simple as adjusting some CSS properties?

Here is a screenshot from another website where this feature is already implemented:

https://i.sstatic.net/bXT5J.png

In the image, you can see the final rankings on the left side and the comparison between performance and initial seeding on the right. An empty field indicates that the seed matches the finish position

html css angular

Answer 1

Answer №1

To easily manage colors, consider creating an array dedicated to storing color data.

Here is a TypeScript example:

colors = [{ finished: "1st", color: "light green" }, { finished: "30th", color: "dark green"}]

Next, iterate through your table data and apply the ngStyle directive:

<table>
  <th>Team</th>
  <th>Finished</th>
  <tr *ngFor="let res of colors" [ngStyle]="{'background': getColor(res.finished)}">
    <td>res.whateveryourfieldiscalled</td>
    <td>res.whateveryourfieldiscalled</td>
  </tr>
</table>

Finally, implement a TypeScript method called getColor:

getColor(finished) {
 return this.colors.filter(item => item.finished === finished)[0].color
}

Answer 2

To easily manage colors, consider creating an array dedicated to storing color data.

Here is a TypeScript example:

colors = [{ finished: "1st", color: "light green" }, { finished: "30th", color: "dark green"}]

Next, iterate through your table data and apply the ngStyle directive:

<table>
  <th>Team</th>
  <th>Finished</th>
  <tr *ngFor="let res of colors" [ngStyle]="{'background': getColor(res.finished)}">
    <td>res.whateveryourfieldiscalled</td>
    <td>res.whateveryourfieldiscalled</td>
  </tr>
</table>

Finally, implement a TypeScript method called getColor:

getColor(finished) {
 return this.colors.filter(item => item.finished === finished)[0].color
}

Tips for changing the background color depending on the value

Answer №1

Similar questions

Assign the input text field's value programmatically in the code-behind of a C# Asp.net application

Display/conceal within a jQuery fixed navigation bar (center-aligned)

Scrolling the inner container in a CSS flexbox layout: tips and tricks

Tips for efficiently finding and comparing text within the results generated by a for loop in Angular/Javascript

JS filter function is not functioning as expected. It's unclear what the issue might be

Sorting data in a Footable table by an unfinished line

What is the best way to display multiple files in a vertical stack when choosing a file?

Is your data coming in as NaN?

How to style the first column of the first row in a table using CSS without affecting nested tables

How can I detect a DOM element mutation based on a CSS selector, and if this is possible, how can it be accomplished?

"Trouble with Material-UI DataGrid: Column headers are being cut off

Retrieve input value from a jQuery template

Issue with Chrome Browser Border Radius Bug when applied to element with Display: Table

Utilize the 'Save and add another' feature within a bootstrap modal

The requested resource at http://js:port/socket.io/1/ could not be located (Error 404

A webpage styled with w3.css featuring text without any underline

Adding a Material Icon to an input type of 'submit' can be done by including the necessary HTML code and

Steps icons in the MUI Stepper component can be adjusted to remove the space between line connectors

Prevent unauthorized entry to css and javascript files

Display Text Only When Selected - Material-UI