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); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter