Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Tabela IMC com legenda

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;

}
1 resposta
solução!

Bom dia!

Sua resolução ficou excelente! Você fez um ótimo uso do aprendizado.

Parabéns pelo empenho nos estudos e continue praticando.

Para que mais pessoas consigam visualizar a sua solução proposta, é recomendado que você marque este tópico como solucionado. Assim pode ajudar ainda mais pessoas :)

Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software