Ejercicio usar funciones puras

Tendré una web con un campo y un botón:

Cadena:[_________]
[Calcular]

Al darle al botón me dirá en un párrafo la cadena más larga y la que tiene más consonantes

<div id="contenedor" class="container ">
		Cadena: <input type="text" id="cad">
		<button id="procesar" class="btn btn-success">Procesar</button>
		<p id="resultado"></p>
	</div>

document.getElementById('procesar').addEventListener('click', procesar)

// Esto no es una función. A esto antes se le llamaba método
function procesar () {
// Recuperar los valores del HTML si hace falta
// Recuperar la cadena que está en cad

  // Hacer los cálculos pertinentes llamando a funciones si hace falta
  // Tengo que llamar a consonantesReg

  // Mostrar los valores en el HTML si es necesario
  // Lo que me haya devuelto consonantesReg lo pongo en 'resultado'
  
}

// Función pura: recibe parámetros y devuelve un resultado
// NUNCA pero NUNCA NUNCA hacemos referencia al HTML
function consonantesReg (cadena) {
  cadena = cadena.replace(/[^bcdfghjklmnñpqrstvwxyz]/gi, '')
  return cadena.length
}