1
resposta

[Sugestão] Deixando o código ainda mais visual

adcionei um @keyframe:

Script:

let titulo = document.querySelector('.titulo').innerHTML = "Full Life Nutrição";



calculaImc()



function calculaImc(){
    let pacientes = document.querySelectorAll('.paciente');
    let imc = 0;
for (var i = 0; i < pacientes.length; i++){

    let paciente = pacientes[i]

    let tdPeso = paciente.querySelector(".info-peso");
    let peso = tdPeso.textContent;
    let tdAltura = paciente.querySelector('.info-altura');
    let altura = tdAltura.textContent;
    let tdImc= paciente.querySelector('.info-imc');  




 if(peso <= 0  || peso >= 450){
    tdPeso.textContent = 'Peso Inválido'; 
    tdPeso.classList.add('campo-invalido'); 
    tdImc.textContent='Verifique o peso';
    paciente.classList.add('paciente-invalido');
} else if(altura <= 1.10 || altura >= 3.00){
    tdAltura.textContent = 'Altura Inválida';
    tdAltura.classList.add('campo-invalido');
    tdImc.textContent = 'Verfique a altura';
    paciente.classList.add('paciente-invalido');
}else{
    let imc = peso / (altura * altura);    
    imc  = parseFloat(imc);
    tdImc.textContent = imc.toFixed(2);
}
}
}

CSS com Keyframe:

adicionar-paciente{
    margin-top: 30px;
}
@keyframes campo-invalido{
    0%{opacity: 0;}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}
.campo-invalido{
    background-color:  rgb(224, 92, 92);
    animation: campo-invalido 1.0s linear infinite;
}
.paciente-invalido{
    background-color: rgb(205, 192, 8);
}
1 resposta

Olá Thiago, tudo bem?

Você adicionou um @keyframe ao seu código para deixá-lo mais visual e é uma ótima ideia!

Muito obrigada por compartilhar com a gente. Parabéns por praticar :D

Um abraço e bons estudos.