Buenas noches, les comparto mi código ,
si quieres detallar, usar o/y experimentar te invito a transcribir el código, en caso de tener alguna duda escríbeme, tratare de ayudarte .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMC</title>
</head>
<body >
<div class="contenedor" style="margin:100px 200px; background:#ccc ;padding: 1rem;border: none;border-radius: 15px;box-shadow: 3px 3px #999494;">
<h1 style="display:flex; justify-content: center; text-align: center;margin: 40px auto;">
Ejercicio De Indice Masa Corporal
</h1>
<div style="display:'flex'">
<div id="imc" style="justify-content:center; text-align:center; ">
<form>
<label for="nombre">Cual es tu nombre : </label>
<input id="nombre"
type="text"
placeholder="Introduce tu nombre"
>
<br><br>
<label for="peso">Peso : </label>
<input id="peso"
name="peso"
type="number"
placeholder="Introduce tu peso"
>
<label for="altura">altura : </label>
<input id="altura"
name="altura"
type="number"
placeholder="Introduce tu atura"
>
<br>
<br>
<input id="button"
type="button"
value="Convertir"
>
<input type="submit"
value="Reset"
>
</form>
<br><hr>
<p>Promedio IMC : </p>
<input id="promedioIMC"type="text" readonly>
<br><hr>
<p >Resultados :</p>
<ul id="listaResultado">
</ul>
</div>
</div>
</div>
<script src="code.js"></script>
</body>
</html>
JAVASCRIPT
/* llamamos/traemos a los elementos necesarios del HTML apartir de la id
y con "document.querySelector", estos elementos deben estar en una variable para poder usarlos*/
let nombre = document.querySelector("#nombre");
let peso = document.querySelector("#peso");
let altura = document.querySelector("#altura");
let button = document.querySelector("#button");
let listaResultado = document.querySelector("#listaResultado");
let promedioIMC = document.querySelector("#promedioIMC");
/* Al ser llamada la funcion "LISTA" con sus respectivos parametros,
crea un elemento <li> y en este le agregamos un elemento <p> la cual
terminamos añadiendo al <ul> que tiene como identificador "listaResultado".
En esta funcion calculamos el IMC directamente
*/
const lista = (nombre,peso,altura) => {
elementoLista = document.createElement("li");
elementoLista= `<p>El indice de masa corporal de <b>${nombre}</b> es de <b>${imc(peso,altura)}</b></p>`;
listaResultado.insertAdjacentHTML('afterbegin',elementoLista);//esta linea es la que agrega lo creado al <ul>
}
const imc = (peso,altura) => {
calculo = peso/(altura*altura);
promedio(calculo);
return calculo ;
}
// los calculos(imc) se almacenan en un array la cual es recorrido con un for con el fin de sumar
// y dividir los elementos del mismo y asi dar el promedio del imc
let array = [];
const promedio = (calculo) => {
let media = null ;
push = array.push(calculo);
for(i = 0; i < array.length; i++){
media += array[i];
}
promedioIMC.value=`${media/array.length}`;
}
// la funcion "RESET" borra lo escrito en los inputs
const reset = () => {
peso.value = "";
altura.value = "";
nombre.value = "";
}
// Al darle click al boton va a realizar la condicion
button.addEventListener("click", () =>{
if (peso.value != "" && altura.value != "" && nombre.value != ""){
lista(nombre.value.toUpperCase(),peso.value,altura.value)
reset();
}
else { // si la primera condicion no se cumple nos da un alert
alert("Completa todos los campos!!")
}
})