How to Apply CSS based on variable - php

Question

we have created a table (6x2) with column 2 containing a FA circle followed by a database field (environment in the example below) which contains the value (Outstanding, Very Good, Good, Needs Improvement & Adequate).
I want the colour of the fa-circle (traffic light colours) to be set depending on the value of field that is in that line with an arbitrary map (the correspondence between color and value will be arbitrary and set upfront).
I'm both available to have it solved server side or client side but I wish the document to have that feature where each value in the second column will have a fa-circle with a color depending on that value.
</h2>
<table class="tableag" style="width: 80%;">
<tbody>
<tr>
<td style="width: 40.0000%;background-color: #ffffff;color: #f2a34f;border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;"><b>Category</b></td>
<td style="width: 60.0000%;background-color: #ffffff;color: #f2a34f;border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;"><b>Rating</b></td>
</tr>
<tr>
<td style="width: 40.0000%;">Overall<br></td>
<td style="width: 60.0000%;background-color: #ffffff;color: #000000; class = "outcome"; "><i class="fa fa-circle" aria-hidden="true"></i> <br><?php echo $user['rating']?></td>
</tr>
<tr>
<td style="width: 40.0000%;">Care & Support<br></td>
<td style="width: 60.0000%;background-color: #ffffff;color: #000000;class = "outcome";"> <i class="fa fa-circle" aria-hidden="true"></i> <br><?php echo $user['care_and_support']?></td>
</tr>
<tr>
<td style="width: 40.0000%;">Environment<br></td>
<td style="width: 60.0000%;background-color: #ffffff;color: #000000;class = "outcome";"><i class="fa fa-circle" aria-hidden="true"></i> <br><?php echo $user['environment']?></td>
</tr>
<tr>
<td style="width: 40.0000%;">Leadership<br></td>
<td style="width: 60.0000%;background-color: #ffffff;color: #000000;class = "outcome";"><i class="fa fa-circle" aria-hidden="true"></i> <br><?php echo $user['leadership']?></td>
</tr>
<tr>
<td style="width: 40.0000%;">Staff & team</td>
<td style="width: 60.0000%;background-color: #ffffff;color: #000000;class = "outcome";"><i class="fa fa-circle" aria-hidden="true"></i> <br><?php echo $user['staff_team']?></td>
</tr>
<tr>
<td style="width: 40.0000%;">Wellbeing<br></td>
<td style="width: 60.0000%;background-color: #ffffff;color: #000000;class = "outcome";"><i class="fa fa-circle" aria-hidden="true"></i> <br><?php echo $user['wellbeing']?></td>
</tr>
<tr>
<td style="width: 40.0000%;">Full report<br></td>
<td style="width: 60.0000%;background-color: #ffffff;color: #000000;"><a class="btn btn-warning btn-rg" href=<?php echo $user['cqc_url_report_english']?> target="_blank">Full Report</a></td>
</tr>
</tbody>
</table>

Answer 1

Assuming you want 5 different colors, I suggest you to use a custom PHP function within your script
<?php
function getColor($rank)
{
switch($rank)
{
case 'Outstanding': return 'green';
case 'Very Good' : return 'yellow';
case 'Good': return 'orange';
case 'Needs Improvement' : return 'red';
case 'Adequate' : return 'grey';
default : return 'black';
}
}
?>
<i class="fa fa-circle" aria-hidden="true" style="color:<?php getColor(rank)?>"></i>
For a more cleaner approch, you can return a CSS class name within your function instead of a color

Answer 2

This solution will use a javascript strategy that will run client side.
You have a map defining which css class corresponds to each ranking value as mapOfColors.
When the page will be loaded in the browser, the code will loop through all the table rows, looking for the value of each second column and changing color of the nested i.fa element assigning a css class to it corresponding to its text value.
I chose arbitrary colours for each (decided upfront) ranking value.
I also took the chance to better refactor the styling of your table so that it's defined as css rules.
const mapOfColors =
{
'0' : 'rank0',
'1' : 'rank1',
'2' : 'rank2',
'3' : 'rank3',
'4' : 'rank4',
'5' : 'rank5',
'6' : 'rank6',
/*...*/
}
const rows = document.querySelectorAll('.tableag tbody tr');
for(const row of rows){
const field = row.querySelector('td:nth-child(2)');
const value = field.textContent.trim();
if(mapOfColors.hasOwnProperty(value)){
const className = mapOfColors[value];
field.querySelector('i.fa').classList.add(className);
}
}
.tableag{
width: 80%;
}
/*style for the header first col*/
.tableag > thead > tr > th:nth-child(1){
width: 40%;
background-color: #ffffff;
color: #f2a34f;
border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;
text-align: left;
}
/*style for the header second col*/
.tableag > thead > tr > th:nth-child(2){
width: 60%;
background-color: #ffffff;
color: #f2a34f;
border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;
text-align: left;
}
/*style for the table content first col*/
.tableag > tbody > tr > td:nth-child(1){
width: 40%;
}
/*style for the table content second col*/
.tableag > tbody > tr > td:nth-child(2){
width: 60%;
background-color: #ffffff;
color: #000000;
}
/*Ranking styles*/
.rank0{ color: red; }
.rank1{ color: orange; }
.rank2{ color: green; }
.rank3{ color: blue; }
.rank4{ color: pink; }
.rank5{ color: black; }
.rank6{ color: gray; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="tableag">
<thead>
<tr>
<th><b>Category</b></th>
<th><b>Rating</b></th>
</tr>
</thead>
<tbody>
<tr>
<td>Overall<br></td>
<td>
<i class="fa fa-circle" aria-hidden="true"></i>
1<br>
</td>
</tr>
<tr>
<td>Care & Support<br></td>
<td>
<i class="fa fa-circle" aria-hidden="true"></i>
2<br>
</td>
</tr>
<tr>
<td>Environment<br></td>
<td>
<i class="fa fa-circle" aria-hidden="true"></i>
3<br>
</td>
</tr>
<tr>
<td>Leadership<br></td>
<td>
<i class="fa fa-circle" aria-hidden="true"></i>
4<br>
</td>
</tr>
<tr>
<td>Staff & team</td>
<td>
<i class="fa fa-circle" aria-hidden="true"></i>
5<br>
</td>
</tr>
<tr>
<td>Wellbeing<br></td>
<td>
<i class="fa fa-circle" aria-hidden="true"></i>
6<br>
</td>
</tr>
<tr>
<td>Full report<br></td>
<td>
<a class="btn btn-warning btn-rg" href="" target="_blank">Full Report</a>
</td>
</tr>
</tbody>
</table>