Aceitou sugestão de melhoria
separei o tratamento dos erros do form
function pacienteValido(paciente) {
erros = []
if (!validaAltura(paciente.altura)) erros.push('Altura inválida! ou Campo não preenchido')
if (!validaPeso(paciente.peso)) erros.push('Peso inválido! ou Campo não preenchido')
if (paciente.nome == '') erros.push('Nome inválido! ou Campo não preenchido')
if (paciente.gordura == '') erros.push('Gordura inválida! ou Campo não preenchido')
return erros
}
function exibiErro(erros) {
let mensagemErro = document.querySelector('.mensagens-erros')
mensagemErro.innerHTML = ""
erros.forEach(erro => {
let li = document.createElement('li')
li.textContent = erro
mensagemErro.appendChild(li)
});
}
function apagaMensagemErro(){
let mensagemErro = document.querySelector('.mensagens-erros')
mensagemErro.innerHTML = ""
}
esse é o arquivo do form.js
let btnAdiciona = document.querySelector('#adicionar-paciente')
let form = document.querySelector('#form-adiciona')
let tabelaPaciente = document.querySelector('#tabela-pacientes')
btnAdiciona.addEventListener('click', novoPaciente)
function novoPaciente(evento) {
evento.preventDefault()
let paciente = dadosPaciente(form)
let erros = pacienteValido(paciente)
if (erros.length > 0) {
exibiErro(erros)
return
}
tabelaPaciente.appendChild(criarTr(paciente))
form.reset()
apagaMensagemErro()
}
function criarTr(paciente) {
let trPaciente = document.createElement('tr')
trPaciente.classList.add('paciente')
trPaciente.appendChild(criarTd(paciente.nome, "info-nome"))
trPaciente.appendChild(criarTd(paciente.peso, "info-peso"))
trPaciente.appendChild(criarTd(paciente.altura, "info-altura"))
trPaciente.appendChild(criarTd(paciente.gordura, "info-gordura"))
trPaciente.appendChild(criarTd(paciente.imc, "info-imc"))
return trPaciente
}
function criarTd(valor, classe) {
let td = document.createElement('td')
td.textContent = valor
td.classList.add(classe)
return td
}
function dadosPaciente(form) {
let paciente = {
nome: form.nome.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value,
imc: calcImc(form.peso.value, form.altura.value)
}
return paciente
}
esse é o main.js
let titulo = document.querySelector('.header_titulo');
titulo.textContent = 'Aparecida Nutricionista';
let pacientes = document.querySelectorAll('.paciente')
for (let i = 0; i < pacientes.length; i++) {
let paciente = pacientes[i]
//td de peso,altura e imc
var tdPeso = paciente.querySelector('.info-peso');
var tdAltura = paciente.querySelector('.info-altura');
var tdImc = paciente.querySelector('.info-imc');
let peso = tdPeso.textContent;
let altura = tdAltura.textContent;
//variáveis de validação
var pesoEhValido = validaPeso(peso);
var alturaEhValido = validaAltura(altura);
if(!pesoEhValido) exibiErroPeso()
if(!alturaEhValido) exibiErroAltura()
let imc = tdImc;
imc.textContent = calcImc(peso, altura);
}
//função para calcular imc com validação das variáveis
function calcImc(peso, altura) {
if (pesoEhValido && alturaEhValido) {
var imc = peso / (altura * 2);
return imc.toFixed(2);
}
tdImc.classList.add('campo-invalido')
return 'Impossível Calcular IMC';
}
//função valida peso do paciente
function validaPeso(peso) {
if (peso <= 0 || peso >= 1000 || peso == "") {
return false;
} else
return true;
}
//função valida altura do paciente
function validaAltura(altura) {
if (altura <= 0 || altura >= 3.00 || altura == "") {
return false;
} else
return true;
}
function exibiErroPeso(){
tdPeso.textContent += ' (Peso inválido!)';
tdPeso.classList.add('campo-invalido')
}
function exibiErroAltura(){
tdAltura.textContent += ' (altura inválida!)';
tdAltura.classList.add('campo-invalido')
}