13 Haz lo que hicimos en el aula

Buenas!, les comparto lo hecho en la práctica:

var botonAdicionar = document.querySelector("#adicionar-paciente");
botonAdicionar.addEventListener("click", function (event) {


    event.preventDefault(); //evita que el formulario actualice la pagina

    //Capturo valores del formulario
    var formulario = document.querySelector("#form-adicionar");
    var inputNombre = formulario.nombre.value;
    var inputPeso = formulario.peso.value;
    var inputAltura = formulario.altura.value;
    var inputGordura = formulario.gordura.value;
    //Creo HTML nuevo registro de tabla
    var registroNuevo = document.createElement("tr");
    var campoNombre = document.createElement("td");
    var campoPeso = document.createElement("td");
    var campoAltura = document.createElement("td");
    var campoGordura = document.createElement("td");
    var campoIMC = document.createElement("td");
    //Agrego los datos ingresados al HTML
    campoNombre.textContent = inputNombre;
    campoPeso.textContent = inputPeso;
    campoAltura.textContent = inputAltura;
    campoGordura.textContent = inputGordura;
    //Agrego los campos al registro nuevo 
    registroNuevo.appendChild(campoNombre);
    registroNuevo.appendChild(campoPeso);
    registroNuevo.appendChild(campoAltura);
    registroNuevo.appendChild(campoGordura);
    registroNuevo.appendChild(campoIMC);

    //Le agrego un estilo al nuevo registro- Mejor Practica es agregar una clase
    //ya creada en CSS con 
    registroNuevo.style.backgroundColor = "green";


    var tabla = document.querySelector("#tabla-pacientes");
    //Agrego el registro a la tabla


    tabla.appendChild(registroNuevo);


});




var pacientes = document.querySelectorAll(".paciente");


/*  Codigo viejo con ID y QuerySelector, que solo toma el primer TD
/var paciente = document.querySelector("#primer-paciente");
var tdPeso = paciente[0].querySelector(".info-peso");
var peso = tdPeso.textContent;

var tdAltura = paciente[0].querySelector(".info-altura");
var altura = tdAltura.textContent;

var tdIMC = paciente[0].querySelector(".info-imc"); */


for (i = 0; i < pacientes.length; i++) {

    tdPeso = pacientes[i].querySelector(".info-peso");
    peso = tdPeso.textContent;

    tdAltura = pacientes[i].querySelector(".info-altura");
    altura = tdAltura.textContent;

    tdIMC = pacientes[i].querySelector(".info-imc");


    pesoEsValido = true;
    alturaEsValida = true;

    //verdadero o falso --> verdadero
    if ((peso < 10) || (peso > 600)) {
        console.log("Peso incorrecto");
        tdIMC.textContent = "Peso incorrecto";
        pesoEsValido = false;
        // pacientes[i].style.backgroundColor = "lightcoral";
        pacientes[i].classList.add("paciente-incorrecto");
    }

    //verdadero o falso --> verdadero
    if ((altura < 0.50) || (altura >= 3.0)) {
        console.log("Peso incorrecto");
        tdIMC.textContent = "Altura incorrecta";
        alturaEsValida = false;
        //pacientes[i].style.backgroundColor = "lightcoral";
        pacientes[i].classList.add("paciente-incorrecto");
    }

    //verdadero y verdadero --> verdadero
    //verdadero y falso --> falso
    //falso y falso --> falso
    if (pesoEsValido && alturaEsValida) {
        var imc = peso / (altura * altura);
        tdIMC.textContent = imc.toFixed(2);
    }

}