Pasa el mensaje!

Queremos que, al hacer clic en el botón "Enviar", el texto que hayamos introducido en el input sea escrito debajo de Last Message Delivered Puedes aplicar las validaciones de formulario que creas adecuadas.

Pasos a seguir

1. Al hacer hacer clic en el botón de submit, intenta escribir alguna cosa debajo de Last Message Delivered. Cualquier texto.
2. Investiga un poco sobre como conseguir el valor de un campo input.
3. Usa la información del punto anterior para conseguir el valor del campo input, y escríbelo en el elemento del DOM adecuado.
4. BONUS. Fíjate en la demo como se comporta la aplicación cuando no existe un mensaje en el input y le damos a Enviar. ¿Serías capaz de emular dicho comportamiento?

Finalmente, en js/solution_provided.js tienes una solución del autor original.

Restricciones

1. NO copies/pegues una línea de código. Ni siquiera de tu ejercicio anterior. El objetivo es que obtengas soltura y entendimiento en los datos que estás tratando.

2. Queda prohibido el uso de cualquier otro método para obtener elementos del DOM que no sea querySelector.

Demo del proyecto

Demo

Solución

Solución propuesta por Cristian Cullell