Minha refatoração referente as funções do formulário após esta aula, adicionei alguns laços de iterações percorrendo alguns objetos para evitar código desnecessário, com cada função possuindo uma única responsabilidade e até mesmo na função criarPacienteTableRow está recebendo outras funções contendo campos da Table Row como Table Cells ou Table Data, e ainda uma função para adicionar Table Cells na Table Row. Na minha visão achei bem legível, pois os nomes das funções indicam como o JavaScript está interagindo com o HTML e com quais elementos.
Enfim, fica aqui a dica para quem quiser ideias de separação de responsibilidade:
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
event.preventDefault();
const form = document.querySelector("#form-adiciona");
let pacienteValues = pegarValoresDoInput(form);
pacienteTableRow = criarPacienteTableRow(pacienteValues);
adicionarTableRowEmTableBody(pacienteTableRow);
form.reset();
});
function pegarValoresDoInput(form) {
let paciente = {
nome: form.nome.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value,
imc: calculaIMC(this.peso.value, this.altura.value)
}
return paciente;
}
function criarPacienteTableRow(pacienteValues) {
let pacienteTableRow = document.createElement("tr");
pacienteTableRow.classList.add("paciente");
var pacienteTableCells = criarPacienteTableCells();
atribuirValoresAsTableCells(pacienteTableCells, pacienteValues);
adicionarTableCellsNaTableRow(pacienteTableRow, pacienteTableCells);
return pacienteTableRow;
}
function criarPacienteTableCells() { // Ou table data
pacienteTableCells = {
nome: document.createElement("td"),
peso: document.createElement("td"),
altura: document.createElement("td"),
gordura: document.createElement("td"),
imc: document.createElement("td")
}
return pacienteTableCells;
}
classArray = [
'info-nome',
'info-peso',
'info-altura',
'info-gordura',
'info-imc'
]
function atribuirValoresAsTableCells(objetoTableCells, pacienteValues) {
let i = 0;
for (propriedade in pacienteValues) {
objetoTableCells[propriedade].textContent = pacienteValues[propriedade];
objetoTableCells[propriedade].classList.add(classArray[i]);
i++;
}
}
function adicionarTableCellsNaTableRow(pacienteTableRow, pacienteTableCells) {
for (propriedade in pacienteTableCells) {
pacienteTableRow.appendChild(pacienteTableCells[propriedade]);
}
}
function adicionarTableRowEmTableBody(TableRow) { // Ao corpo da tabela de pacientes
let tableBody = document.querySelector("#tabela-pacientes");
tableBody.appendChild(TableRow);
}