html - How to vary background color based on value

Question

I'm listing out a table that has the results of a tournament. I have the final placements, as well as the original seeds for each team in the tournament. I'm adding a small bubble with a +/- of how the final placement compares to the original seeding. I'd like to make the background get a darker red as the team did worse, and darker green as the team did better.

Example:

Team A finished 1st and was seeded 3rd -> light green
Team B finish 2nd and was seeded 30th -> dark green
Team C finished 10th was seeded 8th -> light red
Team D finish 30th and was seeded 1st -> dark red

I'd like to set a limit obviously for how dark/light the colors get, so teams that out/under performed past a certain amount would all have the same dark tone.

My site is built using Angular, but is this possible to do with just some simple CSS?

Here is a picture from another site that has this already implemented:

As you can see, the final finish is listed on the left, and how well they performed in comparison to their original seeding is on the right. Blank signifies Seed == Finish

question from:https://stackoverflow.com/questions/65880750/how-to-vary-background-color-based-on-value

Answer 1

You can create an array for the colors

TS:

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

Loop through your data in a table (or how you prefer) and add ngStyle:

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

And then add it with a ts getColor method:

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