Lo que hicimos en el aula sobre Arrays, Loops y Styles.

var titulo = document.querySelector('.titulo');

titulo.textContent = 'YeiJoa Buena Vida Nutrición';

        /*Para todos los pacientes no es necesario copia el código del primer paciente e ir al segundo paciente (JUAN) y crear un ID como segundo paciente, pero eso NO ES una buena práctica de programación, para eso tenemos los loops, o iteracciones, arrays que ayuda a repetir actividades, instrucciones, sin necesidad de estar copiando y pegando nuestro código.
        */

//Será en plural, se quita el id y se ubica la clase general del index, que es .paciente; aunque de nuevo sólo selecciona a Pablo. eso es porque .querySelector selecciona al primer paciente, para eso es necesario el .querySelectorAll.

//querySelectorAll, esa instrucción traerá todos los elementos de la clase paciente y retorna un array de pacientes.

var pacientes = document.querySelectorAll('.paciente');
    console.log(pacientes);

    //El siguiente paso es hacer la iteracción que se hace con el for o while, con su parametros.

    for (var i=0; i<pacientes.length; i++){
        //Recuerde que teníamos el error de que la var paciente no existe, si no queremos cambiar todo a la nueva variable HAY UN TRUCO que es crear otra variable paciente y agregarla a la creada pero con Sub i.

        var paciente = pacientes[i];

        var tdPeso = paciente.querySelector('.info-peso');
        var peso = tdPeso.textContent;

        var tdAltura = paciente.querySelector('.info-altura');
        var altura = tdAltura.textContent;

        //Ya tenemos nuestra variables para calcular el IMC, y descomentamos IMC y creamos la var IMC, recordemos la convención minúsculas.
        //Recuerde crear la variable tdIMC con '.info-imc' para ingresar a ese espacio en la pagina web.

        var tdIMC = paciente.querySelector('.info-imc');

        //Trabajamos cambiando peso y altura incoherentes.
        //Para evitar eso usamos operadores lógicos: if, >, <.
        //Usamos los operadores  (||) (&&)

        /*Como hacer para informar si hay parámetros incorrectos.
        Creamos dos variables y las colocamos como verdaderas.
        Y si el peso o altura no corresponde con el if se cambian
        las variables booleanas a falsas dentro del operador if.
        Eso sería para crear otra condición pero con el operador &&
        */

        pesoEsVálido = true;
        alturaEsVálida = true;

        //true || false --> true. (||)Se le describe como **O.
        if ((peso < 0) || (peso > 1000)){
            console.log('Peso incorrecto');//Si solo éste fuera incorrecto si mostrara el console.log
            //No basta con imprimir en la consola, también en la tabla en la web, por eso tdIMC.textContent
            tdIMC.textContent = 'Peso incorrecto';
            pesoEsVálido = false;

           //paciente.style.color = 'red'; esto altera el color de la letra, lo que se quiere es un color de fondo, el background.

            //paciente.style.backgroundColor ='red';
                //con este código queda un rojo muy fuerte, se quiere uno más suave.

            //paciente.style.backgroundColor = 'lightcoral';
                 //Lo llevamos a altura también.

            //Pero supongamos que luego quiere color naranja y luego otro color.

            //paciente.style.backgroundColor = 'orange';

            paciente.classList.add('paciente-incorrecto')
        }

        //true || false --> true
        if ((altura < 0) || (altura > 3.00)){
            tdIMC.textContent = 'Altura incorrecta';
            alturaEsVálida = false;

                //paciente.style.backgroundColor = 'lightcoral'; Pero supongamos que luego quiere color naranja y luego otro color.

                //paciente.style.backgroundColor = 'orange'; Si lo dejo así pues peso cambia al lightcoral y altura en orange vamos a padronizar.

                paciente.classList.add('paciente-incorrecto')
        }

        //true && true --> true. (&&) se le llama ampersand
        //Si ambos son falsos ni siquiera corre el código que sigue
        //porque false && false --> false.
        //Si las dos son verdaderas entonces que haga el cálculo del IMC
        //Esa formula está arriba pero debe ir aquí.
        //Aprendemos el orden de los operadores matemáticos.

        if (pesoEsVálido && alturaEsVálida){
            var imc = peso / (altura * altura);
                    // 100/(2*2) = 100/4 = 25
        tdIMC.textContent = imc.toFixed(2);
        //podemos arreglar el tema de los decimales para el imc con .toFixed; que pide rango de 0 a 20, y queremos 2.
        }


    }