-
-
Save douglasbernardo/dd055e1f5cf21896efd7087e3b158dd8 to your computer and use it in GitHub Desktop.
A função pega o imc calculado e mostra qual a classificação do paciente, mas quando é adicionado um novo paciente a classificação dele sempre fica igual a do ultimo paciente da tabela
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var pacientes = document.querySelectorAll(".paciente");//pega os pacientes da tabela | |
for(var i = 0; i < pacientes.length; i++){ | |
var paciente = pacientes[i]; | |
var peso = paciente.querySelector(".info-peso").textContent; | |
var altura = paciente.querySelector(".info-altura").textContent; | |
var imc = paciente.querySelector(".info-imc"); | |
var faixa = paciente.querySelector(".info-faixa") | |
pesoValido = validaPeso(peso); | |
alturaValida = validaAltura(altura); | |
if(!pesoValido){ | |
let peso = paciente.querySelector(".info-peso"); | |
pesoValido = false; | |
peso.textContent = "Peso Invalido"; | |
imc.textContent = "Erro ao calcular Imc"; | |
paciente.classList.add("paciente-invalido"); | |
} | |
if(!alturaValida){ | |
let altura = paciente.querySelector(".info-altura"); | |
alturaValida = false; | |
altura.textContent = "Altura Inválida"; | |
imc.textContent = "Erro ao calcular Imc"; | |
paciente.classList.add("paciente-invalido"); | |
} | |
if(alturaValida && pesoValido){ | |
var resultadoImc = calculaImc(peso,altura); | |
imc.textContent = resultadoImc; | |
exibeFaixas(resultadoImc) | |
} | |
} | |
function validaAltura(altura){ | |
if(altura > 0 && altura <= 2.80){ | |
return true; | |
}else{ | |
return false; | |
} | |
} | |
function validaPeso(peso){ | |
if(peso >= 0 && peso < 400){ | |
return true; | |
}else{ | |
return false; | |
} | |
} | |
function calculaImc(peso,altura){ | |
let imc =0; | |
imc = peso / (altura * altura); | |
return imc.toFixed(2); | |
} | |
function exibeFaixas(imc){ | |
let faixa = paciente.querySelector("[data-classificacao]"); | |
if(imc < 18.5){ | |
console.log("Muito magro"); | |
faixa.textContent = "Muito magro" | |
}else if(imc > 18.5 && imc < 24.9){ | |
console.log("Peso Normal"); | |
faixa.textContent = "Peso Normal" | |
}else if(imc > 25 && imc < 29.9){ | |
console.log("Sobrepeso") | |
}else if(imc > 30 && imc < 34.9){ | |
console.log("Obesidade grau I") | |
faixa.textContent = "Obesidade grau I" | |
} | |
else if(imc > 35 && imc < 39.9){ | |
console.log("Obesidade grau II") | |
faixa.textContent = "Obesidade grau II" | |
} | |
else if(imc > 40){ | |
console.log("Obesidade grau III") | |
faixa.textContent = "Obesidade grau III" | |
} | |
return faixa; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var botaoAdicionar = document.querySelector("#adicionar-paciente"); | |
botaoAdicionar.addEventListener("click", function(event){ | |
event.preventDefault(); | |
const form = document.getElementById("form-adiciona"); | |
const paciente = obtemPacienteDoFormulario(form); | |
const erros = validaPaciente(paciente); | |
//console.log(erros); | |
if(erros.length > 0){ | |
exibeMensagensdeErro(erros); | |
return; | |
} | |
adicionaPacientesDaApi(paciente); | |
form.reset(); | |
document.querySelector("#mensagens-erros").innerHTML = ""; //Apagando mensagens de erro quando adiciona o cliente | |
}); | |
function obtemPacienteDoFormulario(form){ | |
const paciente = { // valores do formulario | |
nome: form.nome.value, | |
peso: form.peso.value, | |
altura: form.altura.value, | |
imc: calculaImc(form.peso.value, form.altura.value), | |
faixa: exibeFaixas(this.imc).innerHTML | |
} | |
console.log(paciente.imc) | |
console.log(paciente.faixa) | |
return paciente; | |
} | |
function montarTr(paciente){ | |
var pacienteTr = document.createElement("tr"); | |
pacienteTr.classList.add("paciente"); | |
pacienteTr.appendChild(montarTd(paciente.nome, "info-nome")); //cria um novo Tr e adiciona na tabela | |
pacienteTr.appendChild(montarTd(paciente.peso, "info-peso")); | |
pacienteTr.appendChild(montarTd(paciente.altura, "info-altura")); | |
pacienteTr.appendChild(montarTd(paciente.imc, "info-imc")); | |
pacienteTr.appendChild(montarTd(paciente.faixa,"info-faixa")); | |
return pacienteTr; | |
} | |
function montarTd(dado,classe){ | |
var td = document.createElement("td"); | |
td.textContent = dado; | |
td.classList.add(classe); | |
return td; | |
} | |
function validaPaciente(paciente){ | |
let erros = []; | |
if(paciente.nome.length == 0){ | |
erros.push("O campo nome deve ser preenchido"); // Coloca os erros dentro do array | |
} | |
if(!validaPeso(paciente.peso) || paciente.peso.length == "" ){ | |
erros.push("Peso inválido"); //coloca a mensagem dentro do array | |
} | |
if(!validaAltura(paciente.altura) || paciente.altura.length == ""){ | |
erros.push("Altura inválida"); | |
} | |
return erros; | |
} | |
function adicionaPacientesDaApi(paciente){ | |
var pacienteTr = montarTr(paciente); | |
var tabela = document.querySelector("#tabela-pacientes"); | |
//adiciona pacientes na tabela | |
tabela.appendChild(pacienteTr); | |
return pacienteTr; | |
} | |
function exibeMensagensdeErro(erros){ | |
let ul = document.querySelector("#mensagens-erros"); | |
ul.innerHTML = ""; //Apagar mensagens anteriores e colocar as novas | |
erros.forEach(function(erro){ | |
let li = document.createElement("li"); | |
li.textContent = erro; | |
ul.appendChild(li); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
<label for="filtrar-tabela">Buscar :</label> | |
<input type="text" name="filtro" id="filtrar-tabela"> | |
<table> | |
<thead> | |
<tr> | |
<th>Nome</th> | |
<th>Peso(kg)</th> | |
<th>Altura(m)</th> | |
<th>IMC</th> | |
<th>Classificação</th> | |
</tr> | |
</thead> | |
<tbody id="tabela-pacientes"> | |
<tr class="paciente"> | |
<td class="info-nome">Paulo</td> | |
<td class="info-peso">134</td> | |
<td class="info-altura">1.71</td> | |
<td class="info-imc">0</td> | |
<td class="info-faixa" data-classificacao></td> | |
</tr> | |
<tr class="paciente"> | |
<td class="info-nome">João</td> | |
<td class="info-peso">100</td> | |
<td class="info-altura">1.80</td> | |
<td class="info-imc">0</td> | |
<td class="info-faixa" data-classificacao></td> | |
</tr> | |
<tr class="paciente"> | |
<td class="info-nome">Erica</td> | |
<td class="info-peso">124</td> | |
<td class="info-altura">1.70</td> | |
<td class="info-imc">0</td> | |
<td class="info-faixa" data-classificacao></td> | |
</tr> | |
<tr class="paciente"> | |
<td class="info-nome">Douglas</td> | |
<td class="info-peso">85</td> | |
<td class="info-altura">1.93</td> | |
<td class="info-imc">0</td> | |
<td class="info-faixa" data-classificacao></td> | |
</tr> | |
<tr class="paciente"> | |
<td class="info-nome">Juliana</td> | |
<td class="info-peso">69</td> | |
<td class="info-altura">1.73</td> | |
<td class="info-imc">0</td> | |
<td class="info-faixa" data-classificacao></td> | |
</tr> | |
</tbody> | |
</table> | |
<span id="erro-ajax" class="naoMostrar">Erro ao buscar os pacientes</span> | |
<button id="buscar-pacientes" class="botao bto-principal">Buscar Pacientes</button> | |
</section> | |
</main> | |
<!-- ... --> | |
<section class="container"> | |
<h2 id="titulo-form">Adicionar novo paciente</h2> | |
<ul id="mensagens-erros"></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> | |
<button id="adicionar-paciente" class="botao bto-principal">Adicionar</button> | |
</form> | |
</section> | |
<script src="js/calcula-imc.js"></script> | |
<script src="js/remover-cliente.js"></script> | |
<script src="js/form.js"></script> | |
<script src="js/filtra.js"></script> | |
<script src="js/buscar-pacientes.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment