Código Inicial
let tabelaPacientes = document.querySelector("#tabela-pacientes");
let pacientes = tabelaPacientes.querySelectorAll(".paciente");
Código que adiciona novo paciente
let button = document.querySelector("#adicionar-paciente");
let form = document.querySelector("#form-adiciona");
let infoErro = document.querySelector(".info-erro");
button.addEventListener("click", function(event){
event.preventDefault();
if (validaçãoDeDados()){
novaLinha();
form.reset();
infoErro.textContent = "";
infoErro.classList.remove("aponta_erro");
} else {
mostraErro();
}
});
function novaLinha() {
let novoPaciente = {
nome: form.nome.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value
}
let linha = document.createElement("tr");
linha.classList.add("paciente");
let campoNome = document.createElement("td");
campoNome.classList.add("info-nome");
let nome = campoNome.textContent = novoPaciente.nome;
let campoPeso = document.createElement("td");
campoPeso.classList.add("info-peso");
let peso = campoPeso.textContent = novoPaciente.peso;
let campoAltura = document.createElement("td");
campoAltura.classList.add("info-altura");
let altura = campoAltura.textContent = novoPaciente.altura;
let campoGordura = document.createElement("td");
campoGordura.classList.add("info-gordura");
let gordura = campoGordura.textContent = novoPaciente.gordura;
let campoImc = document.createElement("td");
campoImc.classList.add("info-imc");
campoImc.textContent = calculaImc(peso, altura);
linha.appendChild(campoNome);
linha.appendChild(campoPeso);
linha.appendChild(campoAltura);
linha.appendChild(campoGordura);
linha.appendChild(campoImc);
tabelaPacientes.appendChild(linha);
}
function validaçãoDeDados(){
let dadosOk = true;
let novoPaciente = {
nome: form.nome.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value
}
if (novoPaciente.nome == ""){
dadosOk = false;
}
if (novoPaciente.peso <= 0 || novoPaciente.peso >= 300){
dadosOk = false;
}
if (novoPaciente.altura <= 0 || novoPaciente.altura >= 3){
dadosOk = false;
}
if (novoPaciente.gordura < 0 || novoPaciente.gordura == ""){
dadosOk = false;
}
return dadosOk;
}
function mostraErro(){
let novoPaciente = {
nome: form.nome.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value
}
infoErro.classList.add("aponta_erro");
if (novoPaciente.nome == ""){
infoErro.textContent = "Campo Nome Vazio";
}
if (novoPaciente.peso <= 0 || novoPaciente.peso >= 300){
infoErro.textContent = "Peso Inválido";
}
if (novoPaciente.altura <= 0 || novoPaciente.altura >= 3){
infoErro.textContent = "Altura Inválida";
}
if (novoPaciente.gordura < 0 || novoPaciente.gordura == ""){
infoErro.textContent = "Gordura Inválida";
}
}
Abaixo código filtrar
let pesquisa = document.querySelector("#filtrar");
pesquisa.addEventListener("input", function(){
for (var i = 0; i < pacientes.length; i++){
let paciente = pacientes[i];
let nomePaciente = paciente.querySelector(".info-nome");
let nome = nomePaciente.textContent;
let expressão = new RegExp(this.value, "i");
if (expressão.test(nome)) {
paciente.classList.remove("esconde");
} else {
if (this.value != ""){
paciente.classList.add("esconde");
} else {
paciente.classList.remove("esconde");
}
}
}
});