Fiz um código para alterar a cor do IMC, caso o paciente esteja abaixo do peso, com peso normal, obesidade... Quem quiser pode adaptar e utilizar também :)
Código no HTML de uma tabela com a legenda das cores;
<section class="container">
<table class = "legenda">
<thead>
<tr>
<td>Tabela IMC</td>
</tr>
</thead>
<tbody>
<tr>
<td class = "cuidado">Abaixo do Peso</td>
</tr>
<tr>
<td class = "peso-normal">Peso Normal</td>
</tr>
<tr>
<td class = "sobrepeso-">Sobrepeso</td>
</tr>
<tr>
<td class = "obesidade-um">Obesidade de Grau I</td>
</tr>
<tr>
<td class = "obesidade-dois">Obesidade de Grau II</td>
</tr>
<tr>
<td class = "cuidado">Obesidade de Grau III</td>
</tr>
</tbody>
</table>
</section>
Código da lógica para a mudança de cores de acordo com o valor do IMC, dentro do loop for;
const abaixoPeso = 18.5;
const pesoNormal = 24.9;
const sobrepeso = 29.9;
const obesidadeUm = 34.9;
const obesidadeDois = 39.9;
const obesidadeTres = 40;
for(let i = 0; i < pacientes.length; i++){
let paciente = pacientes[i];
let valorPeso = paciente.querySelector(".info-peso");
let valorAltura = paciente.querySelector(".info-altura");
let peso = valorPeso.textContent;
let altura = valorAltura.textContent;
let imcCalculo = peso / (altura * altura);
let imc = paciente.querySelector(".info-imc");
imc.textContent = imcCalculo.toFixed(2);
if(peso <= 0 || peso >= 500){
imc.textContent = "Erro! Peso inválido."
valorPeso.classList.add("cuidado");
}
else if(altura <= 0 || altura >= 2.70){
valorAltura.classList.add("cuidado");
imc.textContent = "Erro! Altura inválida."
}
else{
imc.textContent = imcCalculo.toFixed(2);
}
if(imcCalculo <= abaixoPeso){
imc.classList.add("cuidado")
}
else if(imcCalculo >= abaixoPeso && imcCalculo <= pesoNormal){
imc.classList.add("peso-normal")
}
else if(imcCalculo >= pesoNormal && imcCalculo <= sobrepeso){
imc.classList.add("sobrepeso-")
}
else if(imcCalculo >= sobrepeso && imcCalculo <= obesidadeUm){
imc.classList.add("obesidade-um")
}
else if(imcCalculo >= obesidadeUm && imcCalculo <= obesidadeDois){
imc.classList.add("obesidade-dois")
}
else if(imcCalculo > obesidadeTres){
imc.classList.add("cuidado")
}
}
Código no CSS para a escolha de cores e estilo da tabela;
.cuidado{
background-color: #D6001F;
}
.peso-normal{
background-color: #83E664;
}
.sobrepeso-{
background-color: #F0CB34;
}
.obesidade-um{
background-color: #D66434;
}
.obesidade-dois{
background-color:#EE2C2C;
}
.legenda{
width: 200px;
margin: 40px 0;
font-size: 10px;
font-weight: bold;
display: inline-block;
}
.legenda thead{
background-color: #cccccc;
}
.legenda tr{
border: 1.5px solid black;
}