IMC-js cálcula dinámicamente el índice de masa corporal.

PHOTO EMBED

Sat Jun 03 2023 13:05:00 GMT+0000 (Coordinated Universal Time)

Saved by @marcton #html #javascript

function formularioIMC() {
    // Caja formulario o etiqueta padre. Hija de un div dentro de aside.
    let formulario = document.createElement("form");

    ///////////////////////////////////////////////////////////
    // Conjunto de cajitas fieldset contenedoras de
    // un input + label cada una.    
    let cajitaPeso = document.createElement("fieldset");
    let cajitaAltura = document.createElement("fieldset");

    let tituloPeso = document.createElement("legend");
    let tituloAltura = document.createElement("legend");
    ///////////////////////////////////////////////////////////



    // variables para los saltos de línea, una para salto,
    // otra para salto + raya horizontal.
    let salto = document.createElement("br");
    let salton = document.createElement("hr");
    ////////////////////////////////////////////////////////////    

    // variables para los label principales.
    // Peso y Altura.
    let etiquetaPeso = document.createElement("label");
    let etiquetaAltura = document.createElement("label");
    /////////////////////////////////////////////////////////////    

    // variables para los input principales.
    // Peso y Altura.
    let paraPeso = document.createElement("input");

    let paraAltura = document.createElement("input");

    ///////////////////////////////////////////////////////////// 



    // variables para los input boton.
    // Calcular y borrar.
    let calculo = document.createElement("input");
    let borro = document.createElement("input");
    
    ////////////////////////////////////////////////////////////

    // Asignación de valor o texto a las etiquetas legend.
    tituloPeso.innerHTML = `<i>Indíque su Peso: </i>`;
    tituloAltura.innerHTML = `<i>Indíque su Altura: </i>`;
    ////////////////////////////////////////////////////////////

    // Asignación de valor o texto, a las etiquetas label.
    etiquetaPeso.innerHTML = `<b>Calcular masa con peso y altura</b>`;
    etiquetaAltura.innerHTML = `<b>Calcular masa con peso y altura</b>`;
    ////////////////////////////////////////////////////////////////////////  

    // Asignación de atributos a los input.
    paraPeso.setAttribute('type', "text");
    paraPeso.setAttribute('placeholder', "Indíque su Peso por favor.");
    paraPeso.setAttribute('id', "pesos");
    ////////////////////////////////////////////////////////////////////////
    paraAltura.setAttribute('type', "text");
    paraAltura.setAttribute('placeholder', "Indíque su Altura por favor.");
    paraAltura.setAttribute('id', "alturas");
    ////////////////////////////////////////////////////////////////////////    

    //Asignación de atributos tipo y valor al botón de calcular.
    calculo.setAttribute('type', "button");
    calculo.onclick = function () {
        // Generación de la calculadora de índice de masa corporal.
        var valorPeso = parseInt(document.getElementById("pesos").value);
        var valorAltura = parseInt(document.getElementById("alturas").value);

        var altura = valorAltura / 100;
        var calculo = valorPeso / (altura * altura);
        //////////////////////////////////////////////////////////////////////////

        var mensaje;
        var respuesta;
        if (calculo < 18.5) {
            mensaje = 'Delgadez. Deberías ganar peso.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        } else if (calculo < 25) {
            mensaje = 'Peso justo. Ni engordes ni adelgaces.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        } else {
            mensaje = 'Sobrepeso. Deberías adelgazar.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        }
    }
    calculo.setAttribute('value', "Calcular IMC");
    ////////////////////////////////////////////////////////////////    

    //Asignación de atributos tipo y valor al botón de borrar
    borro.setAttribute('type', "reset");
    borro.setAttribute('value', "Borrar cálculo");


    // Impresión del formulario.

    // Primer fieldset.
    formulario.appendChild(salto);
    cajitaPeso.appendChild(tituloPeso);
    cajitaPeso.appendChild(etiquetaPeso);
    cajitaPeso.appendChild(salto);
    cajitaPeso.appendChild(paraPeso);
    formulario.appendChild(cajitaPeso);

    // Segundo fieldset.
    formulario.appendChild(salton);
    cajitaAltura.appendChild(tituloAltura);
    cajitaAltura.appendChild(etiquetaAltura);
    cajitaAltura.appendChild(salto);
    cajitaAltura.appendChild(paraAltura);
    formulario.appendChild(cajitaAltura);

    formulario.appendChild(salton);


    formulario.appendChild(calculo);
    formulario.appendChild(borro);
    document.getElementById("formContent").appendChild(formulario);
}
content_copyCOPY

Código javascript que trabaja con el html IMC para el cálculo del índice de masa corporal