Valores inválidos são inseridos na tabela. Valores válidos, não.
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
Valores inválidos são inseridos na tabela. Valores válidos, não.
código index.hmtl
<!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">
<h2 class="titulo">Aparecida Nutrição</h2>
</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>
<section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<span id="mensagem-erro"></span>
<form id="form-adiciona">
<div class="">
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
</div>
<div class="grupo">
<label for="peso">Peso:</label>
<input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Altura:</label>
<input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">% de Gordura:</label>
<input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
</div>
<button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
</form>
</section>
<script src="js/calcula-imc.js" ></script>
<script src="js/form.js" ></script>
</body>
</html>
cógico calcula-imc.js
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";
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 = validaPeso(peso);
var alturaEhValida = validaAltura(altura);
if (!pesoEhValido) {
console.log("Peso inválido!");
pesoEhValido = false;
tdImc.textContent = "Peso inválido.";
paciente.classList.add("paciente-invalido");
}
if (!alturaEhValida) {
console.log("Altura inválida!");
alturaEhValida = false;
tdImc.textContent = "Altura inválida.";
paciente.classList.add("paciente-invalido");
}
if (pesoEhValido && alturaEhValida) {
var imc = calculaImc(peso, altura);
tdImc.textContent = imc;
}
}
function calculaImc(peso, altura) {
var imc = 0;
imc = peso / (altura * altura);
return imc.toFixed(2);
}
//
function validaPeso(peso){
if (peso >= 0 && peso <= 1000) {
return true;
} else {
return false;
}
}
function validaAltura(altura) {
if (altura >= 0 && altura <= 3.0) {
return true;
} else {
return false;
}
}
código form.js
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
event.preventDefault();
var form = document.querySelector("#form-adiciona");
var paciente = obtemPacienteDoFormulario(form);
var pacienteTr = montaTr(paciente);
// validando paciente
if (!validaPaciente(paciente)) {
console.log("Paciente inválido.");
alert("Paciente inválido!");
return;
}
// adicionado paciente na tabela
var tabela = document.querySelector("#tabela-pacientes");
tabela.appendChild(pacienteTr);
form.reset();
});
function obtemPacienteDoFormulario(form) {
var paciente = {
nome: form.nome.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value,
imc: calculaImc(form.peso.value, form.altura.value)
}
return paciente;
}
function montaTr(paciente) {
var pacienteTr = document.createElement("tr");
pacienteTr.classList.add("paciente");
pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));
return pacienteTr;
//
var erro = validaPaciente(paciente);
if (erro.length > 0) {
var mensagemErro = document.querySelector("#mensagem-erro");
mensagemErro.textContent = erro;
return;
}
//
}
function montaTd(dado, classe) {
var td = document.createElement("td");
td.classList.add(classe);
td.textContent = dado;
return td;
}
// aqui
function validaPaciente(paciente) {
if (validaPeso(paciente.peso)) {
return "";
} else {
return "O peso é inválido.";
}
}
Oi, Maira, tudo bbem?
Onde você demonstrou onde pode estar o erro de não pegar o valor de peso inválido, substitua por:
function validaPaciente(paciente) {
if (validaPeso(paciente.peso) && validaAltura(paciente.altura)) {
return true;
} else {
return false;
}
}Agora apresenta o alert com a mensagem Paciente Inválido. Testa e me fala se deu certo :}