Olá colegas,
acompanhando as aulas de js no introdutório não consegui carregar a cor da classe .paciente-invalido{ backgroundcolor: lightcoral; } para o meu js, quando atualizo o navegador não carrega a cor.
Obrigada pela atenção de todos.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá colegas,
acompanhando as aulas de js no introdutório não consegui carregar a cor da classe .paciente-invalido{ backgroundcolor: lightcoral; } para o meu js, quando atualizo o navegador não carrega a cor.
Obrigada pela atenção de todos.
Nessas situações é interessante mostrar o arquivo html e talvez até o javascript, porque pode ser que o problema não esteja no css, nesse trecho de css que você postou aqui, o nome do atributo deveria ser background-color e não backgroundcolor
Ficando assim :
.paciente-invalido{
background-color: lightcoral;
}Olá Bruno,
Obrigada pela atenção, o codigo acima funciona dentro do javaScript mas quando coloco ele no css ele não funciona, no exemplo acima esqueci de adicionar como esta no css. index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h1 class="titulo">Aparecida Nutrição</h1>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabela-pacientes">
<tr class="paciente" id= "primeiro-paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>
</table>
</section>
</main>
<script src="js/principal.js"></script>
</script>>
</body>
</html>Segue codigo do css. index.css
.paciente-invalido{
background-color: lightcoral;
}principal.js
var pacientes = document.querySelectorAll(".paciente");
for(var i = 0; i < pacientes.length; i++){
var paciente = pacientes[i];
var tdPeso = paciente.querySelector(".info-peso");
var peso = tdPeso.textContent;
var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent;
var tdImc = paciente.querySelector(".info-imc");
var pesoEhValido = true;
var alturaEhValida = true;
if(peso <= 0 || peso >= 1000){
pesoEhValido = false;
tdImc.textContent = "Peso Inválido!";
paciente.classList.add("paciente-invalido");
}
if(altura <= 0 || altura >= 3.00){
alturaEhValida = false;
tdImc.textContent = "Altura Inválida!";
paciente.classList.add("paciente-invalido");
}
if(pesoEhValido && alturaEhValida){
var imc = peso / (altura*altura);
tdImc.textContent = imc.toFixed(2);
}
}Desde de já agradeço pela ajuda e atenção.
Oi Fernanda,
Fiz o teste aqui com os arquivos que você compartilhou e a cor apareceu normalmente.
Peguei o primeiro paciente e coloquei um peso de 1000 nele no HTML e ao recarregar a página ele estava com a cor avermelhada.
No seu caso isto não está acontecendo ?
Olá Douglas,
Exato. Porém neste momento estou continuando as aulas e ele esta mudando a cor. Não sei o que tava acontecendo mas ta funcionando agora, Obrigada.
Aproveitando, Parabéns pelas aulas, você é um ótimo instrutor, ótima didática. Parabéns.