Errors

forms.js

let adicionarPaciente = document.querySelector('#adicionar-paciente')

adicionarPaciente.addEventListener('click', function(event){
    event.preventDefault()

    const form = document.querySelector('#form-adiciona')
    let paciente = coletaPacienteForms(form)
    let pacienteTR = criaTR(paciente)
    let errors = validarPaciente(paciente)
    console.log(errors);

    if(errors.length > 0){
      exibeError(errors)
      return
    }

    //adiciona pacientes na tabela
    let tabela = document.querySelector('#tabela-pacientes')
    tabela.appendChild(pacienteTR)
    form.reset()
    let mensagemErro = document.querySelector('#error')
    mensagemErro.innerHTML = ''
})

function coletaPacienteForms(form){
  let paciente = {
    nome: form.nome.value,
    peso: form.peso.value,
    altura: form.altura.value,
    gordura: form.gordura.value,
    imc: calcularIMC(form.peso.value,form.altura.value)
  }
  return paciente
}

function criaTR(paciente){
// cria os elementos ao clicar no botão   
  let pacienteTR = document.createElement('tr')
  pacienteTR.classList.add('paciente') // cria a classe para a tr

//coloca a td como filho da tr e cria as td com as classes
  pacienteTR.appendChild(criaTD(paciente.nome, 'info-nome')) 
  pacienteTR.appendChild(criaTD(paciente.peso, 'info-peso'))
  pacienteTR.appendChild(criaTD(paciente.altura, 'info-altura'))
  pacienteTR.appendChild(criaTD(paciente.gordura, 'info-gordura'))
  pacienteTR.appendChild(criaTD(paciente.imc, 'info-imc'))

  return pacienteTR
}

function criaTD(dado, classe){
  let td = document.createElement('td')
  td.textContent = dado
  td.classList.add(classe)

  return td
}

function validarPaciente(paciente){
  let errors = []

  if(paciente.nome.length == 0){
    errors.push('Nome não pode ser em branco!')
  }

  if(!validarPeso(paciente.peso)){
    errors.push('Peso inválido!')
  }

  if(!validarAltura(paciente.altura)) {
    errors.push('Altura inválida!')
  }

  if(paciente.gordura.length == 0){
    errors.push('Gordura não pode ser em branco!')
  }

  if(paciente.peso.length == 0){
    errors.push('Peso não pode ser em branco!')
  }

  if(paciente.altura.length == 0){
    errors.push('Altura não pode ser em branco!')
  }

  return errors
}

function exibeError(errors){
  let errorUl = document.querySelector('#error')
  errorUl.innerHTML = ''

  errors.forEach(function(error){
    let errorLi = document.createElement('li')
    errorLi.textContent= error
    errorUl.appendChild(errorLi)
  })
}

calculoIMC.js

let titulo = document.querySelector('.titulo')
titulo.textContent = 'Aparecida Nutricionista'

let pacientes = document.querySelectorAll('.paciente')

for(let i = 0; i < pacientes.length; i++){
    let paciente = pacientes[i]

    let td_peso = paciente.querySelector('.info-peso')
    let peso = td_peso.textContent

    let td_altura = paciente.querySelector('.info-altura')
    let altura = td_altura.textContent

    let imc_td = paciente.querySelector('.info-imc')

    let pesoValido = validarPeso(peso)
    let alturaValida = validarAltura(altura)

    if(pesoValido && alturaValida){
        let imc = calcularIMC(peso, altura)
        imc_td.textContent = imc
    }
}

function validarPeso(peso){
    if(peso > 0 && peso < 800){
        return true
    }else{
        return false
    }
}
function validarAltura(altura){
    if(altura > 0 && altura <= 2.5){
        return true
    }else{
        return false
    }
}

function calcularIMC(peso, altura){
    let imc = 0
    imc = peso / (altura * altura)
    return imc.toFixed(2)
}

Olá Letícia, tudo bem com você?

Peço desculpas pela demora em lhe responder.

As mensagens 'Peso inválido!' e 'Altura inválida!' estão sendo apresentadas quando os campos peso e altura ficam em branco, devido não ocorrer uma verificação do tamanho o valor informado no formulário. Para mudarmos esse comportamento, podemos adicionar uma verificação do comprimento do valor informado nos campos, assim, só será apresentado as mensagens de entradas inválidas se de fato o usuário tiver fornecido um valor. Deixo abaixo uma proposta de implementação do código.

• Abra o arquivo forms.js

• Dentro da função validarPaciente localize a estrutura condicional if(!validarPeso(paciente.peso)) e adicione a verificação do comprimento do campo peso, como apresentado abaixo

    if(!validarPeso(paciente.peso) && paciente.peso.length > 0){
    errors.push('Peso inválido!')
    }

• Ainda dentro da função validarPaciente localize a estrutura condicional if(!validarAltura(paciente.altura)) e adicione a verificação do comprimento do campo altura, como apresentado abaixo.

    if(!validarAltura(paciente.altura) && paciente.altura.length > 0) {
    errors.push('Altura inválida!')
    }

• Salve o arquivo from.js

• Abra o arquivo **Index.html no navegador e realize a tentativa de adição de um novo usuário deixando os campos peso e altura em branco.

Peço que teste os passos propostos acima e verifique se obtém êxito.

Espero ter ajudado, em caso de dúvidas estou à disposição.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!