Olá, segui os passos do vídeo, mas não consegui fazer aparecer mensagem de erro e agora os dados errados vão a tabela... Quém puder me ajudar, agradeço muito!
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á, segui os passos do vídeo, mas não consegui fazer aparecer mensagem de erro e agora os dados errados vão a tabela... Quém puder me ajudar, agradeço muito!
Eduardo, coloque seu código aqui
Use </>, no menu, para inserir bloco de código ( Ctrl+Alt+C )
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>
<!-- ... -->
<section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<ul id="mensagens-erro">
<li>Peso é inválido</li>
<li>Altura é inválida</li>
</ul>
<form id="form-adiciona">
<div class="grupo">
<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/principal.js"></script>
<script src="js/form.js"></script>
</body>
</html>
_________________________________________________________________________________________________________________________________________________________________
principal.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 pesoValido = validaPeso(peso);
var alturaValida = validaAltura(altura);
if(!validaPeso){
console.log("Peso Inválido");
pesoValido = false;
tdImc.textContent =("Peso Inválido");
paciente.classList.add("paciente-invalido");
}
if(!validaAltura){
console.log("Altura Inválida");
alturaValida = false;
tdImc.textContent ("Altura Inválida");
paciente.classList.add("paciente-invalido");
}
if(pesoValido && alturavalida){
var imc = calculaImc(peso,altura);
tdImc.textContent = imc;
}
}
function validaPeso(Peso){
if(peso <=0 && peso >=1000){
return true;
}else{
return false;
}
}
function validaAltura(altura){
if(altura <=0 && altura >=4.0){
return true;
}else{
return false;
}
}
function calculaImc(peso,altura){
var imc = 0;
imc = peso / ( altura * altura);
return imc.toFixed(2);
}var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event){ event.preventDefault();
var form = document.querySelector("#form-adiciona");
var paciente = obtemInformacoesPacientes(form);
var pacienteTr = montaTr(paciente);
var erros = validaPaciente(paciente);
console.log(erros);
if(erros.length > 0){
exibeMensagensDeErro(erros);
return;
}
if(!validaPaciente(paciente)){
console.log("Peso inválido");
return;
}
var tabela = document.querySelector("#tabela-pacientes");
tabela.appendChild(pacienteTr);
form.reset();
var mensagemErro = document.querySelector("#mensagens-erro");
mensagemErro.innerHTML = "";});
function obtemInformacoesPacientes(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;}
function montaTd(dado,classe){ var td = document.createElement("td"); td.textContent = dado; td.classList.add("classe"); return td; }
function validaPaciente(paciente){
var erros = [];
if(paciente.nome.length == 0){
erros.push("O nome não pode ser em branco");
}
if(paciente.peso.length == 0){
erros.push("O peso não pode ser em branco");
}
if(paciente.gordura.length == 0){
erros.push("A gordura não pode ser em branco");
}
if(paciente.altura.length == 0){
erros.push("A altura não pode ser em branco");
}
if(!validaPeso(paciente.peso)){
erros.push("Peso é inválido");
}
if(!validaAltura(paciente.altura)){
erros.push("Altura é inválida");
}
return erros;}
function exibeMensagensDeErro(erros){ var ul = document.querySelector("#mensagens-erro"); ul.innerHTML = "";
erros.forEach(function(erro){
var li = documet.createElement("li");
li.textContent = erro;
ul.appendChild(li);
});}
Agora está dando erro nas linhas 111, 112 e 115 Além de não apagar mensagem de peso inválido e altura inválida depois de atualizar a página....
Eduardo, vamos por parte.
Erro de digitação na palavra document .
var li = document.createElement("li");Se vc quer cancela o envio do form em caso de erro tem q colocar false no return
if(erros.length > 0){
exibeMensagensDeErro(erros);
return false;
}Pode tira o texto da mensagem de erro
<ul id='mensagens-erro'>
</ul>Eu alterei a as funções valida peso e altura
function validaPeso(peso) {
return !(peso <= 0 || peso >= 1000)
}
function validaAltura(altura) {
return !(altura <= 0 || altura >= 4.0)
}Então Luiz, acabei de alterar os dados, mas mesmo assim está dando erro quando coloco valores corretos
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>
<!-- ... -->
<section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<ul id="mensagens-erro">
</ul>
<form id="form-adiciona">
<div class="grupo">
<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/principal.js"></script>
<script src="js/form.js"></script>
</body>
</html>
principal.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 pesoValido = validaPeso(peso);
var alturaValida = validaAltura(altura);
if (!pesoValido) {
console.log("Peso Inválido");
pesoValido = false;
tdImc.textContent = ("Peso Inválido");
paciente.classList.add("paciente-invalido");
}
if (!alturaValida) {
console.log("Altura Inválida");
alturaValida = false;
tdImc.textContent("Altura Inválida");
paciente.classList.add("paciente-invalido");
}
if (pesoValido && alturaValida) {
var imc = calculaImc(peso, altura);
tdImc.textContent = imc;
}
}
function validaPeso(peso) {
return !(peso <= 0 || peso >= 1000)
}
function validaAltura(altura) {
return !(altura <= 0 || altura >= 4.0)
}
function calculaImc(peso, altura) {
var imc = 0;
imc = peso / (altura * altura);
return imc.toFixed(2);
}
form.js
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function (event) {
event.preventDefault();
var form = document.querySelector("#form-adiciona");
var paciente = obtemInformacoesPacientes(form);
var pacienteTr = montaTr(paciente);
var erros = validaPaciente(paciente);
console.log(erros);
if (erros.length > 0) {
exibeMensagensDeErro(erros);
return false;
}
if (!validaPaciente(paciente)) {
console.log("Peso inválido");
return;
}
var tabela = document.querySelector("#tabela-pacientes");
tabela.appendChild(pacienteTr);
form.reset();
var mensagemErro = document.querySelector("#mensagens-erro");
mensagemErro.innerHTML = "";
});
function obtemInformacoesPacientes(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;
}
function montaTd(dado, classe) { var td = document.createElement("td"); td.textContent = dado; td.classList.add("classe"); return td; }
function validaPaciente(paciente) {
console.log(paciente)
var erros = [];
if (paciente.nome.length == 0) {
erros.push("O nome não pode ser em branco");
}
if (paciente.peso.length == 0) {
erros.push("O peso não pode ser em branco");
}
if (paciente.gordura.length == 0) {
erros.push("A gordura não pode ser em branco");
}
if (paciente.altura.length == 0) {
erros.push("A altura não pode ser em branco");
}
if (!validaPeso(paciente.peso)) {
erros.push("Peso é inválido");
}
if (!validaAltura(paciente.altura)) {
erros.push("Altura é inválida");
}
return erros;
}
function exibeMensagensDeErro(erros) {
var ul = document.querySelector("#mensagens-erro");
ul.innerHTML = "";
erros.forEach(function (erro) {
var li = document.createElement("li");
li.textContent = erro;
ul.appendChild(li);
});
}Aparece somente o console.log
Está escrito: ['Peso é inválido', 'Altura é inválida']
No "Para testar jsfiddle.net" funcinou! Mas esse código que você colocou é o mesmo que te mandei, né ?
"Qual erro aparece no "console" (F12) ?Qual erro aparece no "console" (F12) ?"
Não acrescenta na tabela e aparece peso inválido e altura inválida
No jsfiddle.net é o código q vc enviou, com os ajustes q eu fiz
Se o problema é no peso e na altutra, então verifique se vc corrigiu
Muita atenção com os pontos de exclamação "!"
// principal.js
function validaPeso(peso) {
return !(peso <= 0 || peso >= 1000)
}
function validaAltura(altura) {
return !(altura <= 0 || altura >= 4.0)
}
//form.js
if (!validaPeso(paciente.peso)) {
erros.push("Peso é inválido");
}
if (!validaAltura(paciente.altura)) {
erros.push("Altura é inválida");
}
Vi algumas coisas diferentes desse código que você colocou, mas agora está dando erro na linha 34 do principal.js
(No jsfiddle.net é o código q vc enviou, com os ajustes q eu fiz
Se o problema é no peso e na altutra, então verifique se vc corrigiu
Muita atenção com os pontos de exclamação "!")
Luiz Dias! Acabei de corrigir isto, deu certinho! Muito Obrigado pela ajuda, eu entendi o que eu estava fazendo de errado!! Agora posso revisar e continuar os estudos!!! Muito Obrigado, que Deus te abençoe!!!