main.js

const formulario = document.querySelector(".formulario");
const inputNombre = document.querySelector(".nombre");
const inputEdad = document.querySelector(".edad");
const inputEmail = document.querySelector(".email");
const resultadoDatos = document.querySelector(".resultadoDatos");

formulario.addEventListener("submit", (event) => {
    //Para que no se recargue la página
    event.preventDefault();

    // Limpiamos resultados anteriores
    resultadoDatos.innerHTML = "";

    //Mostramos el resultado
    const p1 = document.createElement("p");
    p1.textContent = "Nombre: " + inputNombre.value;

    const p2 = document.createElement("p");
    p2.textContent = "Edad: " + inputEdad.value + " años";

    const p3 = document.createElement("p");
    p3.textContent = "Email: " + inputEmail.value;

    // Los añadimos al párrafo de resultado
    resultadoDatos.appendChild(p1);
    resultadoDatos.appendChild(p2);
    resultadoDatos.appendChild(p3);


    //Limpiamos el formulario
    formulario.reset();
});

/*
Explicación:

- El usuario escribe su nombre, edad y email
- Al enviar, se crean tres párrafos nuevos
- A cada uno se le asigna texto con .textContent (es más seguro que innerHTML)
- Se añaden al div resultado
- El formulario se limpia con reset()

Como los formularios tienen su propio evento (submit) y cuando pulsas el botón con type="submit" el formulario intenta enviar los datos y recargar la página, para evitarlo, usamos event.preventDefault();

Usar submit en el formulario es más correcto porque funciona tanto si el usuario hace clic en el botón como si pulsa Enter dentro de un input, 
agrupa la lógica en un solo sitio (el formulario entero) y evita que se envíe accidentalmente la página al servidor.
*/