Tentei fazer de uma forma diferente em que o professor estava ensinando, mas no final não consegui passar os itens do objetos para a tabela, alguem me ajuda, por favor. Bugou a minha mente!!!!
principal
const titulo = document.querySelector('.titulo');
const pesos = document.querySelectorAll('.info-peso');
const alturas = document.querySelectorAll('.info-altura');
const campoIMC = document.querySelectorAll('.info-imc');
const pacientes = document.querySelectorAll('.paciente');
function pegaPaciente() {
for (let contador = 0; contador < pacientes.length; contador++) {
let paciente = pacientes[contador];
let peso = pesos[contador];
let quilos = peso.textContent;
let altura = alturas[contador];
let tamanho = altura.textContent;
verificaPaciente(quilos,tamanho,contador,paciente);
}
}
function verificaPaciente(quilos,tamanho,contador,paciente) {
if(quilos <= 0 || quilos >= 500) {
campoIMC[contador].innerHTML = 'Peso inválido!';
paciente.classList.add('paciente-invalido');
} else if (tamanho <= 0 || tamanho >= 3.00) {
campoIMC[contador].innerHTML = 'Altura inválida!';
paciente.classList.add('paciente-invalido');
} else {
campoIMC[contador].innerHTML = imc(quilos,tamanho);
}
}
function imc(peso,altura) {
let imc = 0;
imc = peso / (altura * altura);
return imc.toFixed(2);
}
pegaPaciente()
adiciona-paciente
const botao = document.getElementById('adicionar-paciente');
const formulario = document.getElementById('form-adiciona');
const grupos = document.querySelectorAll('.grupo');
const tabela = document.getElementById('tabela-pacientes');
botao.addEventListener('click', (evento) => {
evento.preventDefault();
let linha = document.createElement('tr');
linha.classList.add('paciente');
tabela.appendChild(linha);
let altura = formulario[2].value;
let peso = formulario[1].value;
validaForm(linha,altura,peso);
})
function validaForm(linha,altura,peso) {
for(contador in formulario) {
let form = formulario[contador];
if (form.value.length == 0) {
alert ('Para prosseguir é necessario preencher todos os campos vazios.');
break;
} else if (peso <= 0 || peso >= 500) {
alert ('Peso inválido');
formulario[1].value = '';
break;
} else if (altura <= 0 || altura >= 3.00) {
alert ('Altura inválida');
formulario[2].value = '';
break;
} else {
criaLinhas(linha);
criaIMC(linha,peso,altura);
break;
}
}
}
function criaLinhas(linha) {
for(let contador = 0; contador != formulario.length; contador++) {
let identificador = grupos[contador].childNodes[3].name;
const coluna = document.createElement('td');
linha.appendChild(coluna);
coluna.classList.add(`info-${identificador}`);
coluna.innerHTML += formulario[contador].value;
//formulario.reset()
if(contador == 3) {
break;
}
}
}
function criaIMC(linha,peso,altura) {
let coluna = document.createElement('td');
linha.appendChild(coluna);
coluna.classList.add('info-imc');
coluna.innerHTML = imc(peso,altura);
}
carrega
const botaoCarrega = document.querySelector('#carregar-paciente');
botaoCarrega.addEventListener('click', () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api-pacientes.herokuapp.com/pacientes');
xhr.addEventListener('load', () => {
let pacientesAPI = JSON.parse(xhr.responseText);
let infos = ['nome','peso','altura','gordura'];
//console.log(pacientesAPI[1])
for(let contador = 0; contador < pacientesAPI.length; contador++) {
let linha = document.createElement('tr');
tabela.appendChild(linha);
linha.classList.add('paciente');
for(let contador = 0; contador < infos.length; contador++ ){
var coluna = document.createElement('td');
linha.appendChild(coluna);
coluna.classList.add(`info-${infos[contador]}`);
}
// não consegui mais
}
})
xhr.send();
})