En este reto se replicara la estructura del NewsFeed de Twitter, para ello se seguirá una flujo de varias versiones para enfocarnos de una manera más eficiente.
Diseñar un formulario que permita ingresar un texto y un botón para "twittear". Agregar un evento de click al botón o de submit al formulario. En el evento, obtener el texto. Agregar el texto al HTML.
No ingresar texto vacío (deshabilitar el botón de "twittear"). Contar la cantidad de caracteres de forma regresiva.
Si pasa los 140 caracteres, deshabilitar el botón. Si pasa los 120 caracteres, mostrar el contador con OTRO color. Si pasa los 130 caracteres, mostrar el contador con OTRO color. Si pasa los 140 caracteres, mostrar el contador en negativo.
Al presionar enter(/n) que crezca el textarea de acuerdo al tamaño del texto.
Si la cantidad de caracteres ingresados (sin dar un enter), supera al tamaño del textarea por defecto, debe de agregarse una línea más para que no aparezca el scroll. (Si en caso aplica)
Agregar la hora en que se publicó el tweet. En el formato de 24 horas: hh:mm.
-
Creamos la estructura básica de un archivo html con el atributo lang en la etiqueta html.
-
En el head agregamos el link para enlazar la fuente y el archivo css y el title con el nombre del proyecto.
-
En el body creamos una sección general. con el id='container' para que contenga las tres secciones de la página:
- Sección de presentación.
- Sección de formulario y contador.
- Sección dinámica que crea el tweet y la hora.
- Por último enlazamos el archivo js. Notas:
Le dimos al botón el atributo disabled para tenerlo desactivado por default.
Le dimos a 'counter' el valor por default de 140 para que cada que se termine de ejecutar la función del contador de caracteres pinte su valor original.
- La sección general que contiene los elementos de la página(var = container).
- El botón (var = button).
- El textarea(var = textarea).
- El contador de caracteres (var = span);
- Creamos en el documento la sección que contendrá los elementos dinámicos, el tweet y la hora(containerTweet).
- Evento click en el botón que llama a la función showTweet.
- Evento keyup en el textarea que llama a la función toDisable.
- Evento keyup en el textarea que llama a la función colorChangeCounter. (Nota. Intentamos llamar a las dos funciones en el evento keyup para no repetir código pero nos dimos cuenta que no funcionaba).
-
La función toDisable evalúa la longitud del valor del textarea y desactiva el botón en caso de ser igual a 0 o ser mayor o igual a 141, y lo activa en el caso contrario.
-
La función clear le da al textarea el valor de un string vacío, le agrega el atributo placeholder y le regresa al contador el valor de 140.
-
La función showTweet:
- Guarda el mensaje del usuario en la variable tweet
- Crea un elemento dos elementos p.
- Agregamos el contenido del tweet a nuestro elemento p tweetParagraph.
- Agregamos en la variable n nuestra hora, con el método new Date y el método toLocaleTimeString la convertimos en hora local, con hour y minute definimos que el formato sea de dos dígitos.
- Agregamos la var n como contenido en nuestro elemento p timeParagraph.
- Agregamos como hijos a nuestros elementos para que se pinten en la página
- Primero la sección dinámica como hijo de la sección general container.
- Después a la sección dinámica le damos como hijo nuestro p que contiene el tweet.
- Y por último nuestro segundo elemento p que contiene la hora.
- Mandamos llamar a nuestras funciones clear para limpiar el textarea y toDisable para deshabilitar el botón.
- La función colorChangeCounter:
- Crea una variable que llama al span que contiene nuestro contador y le da el valor de la longitud del textarea.
- Le da un valor de 140 y se resta a sí mismo su valor.
- A la variable span le agrega el nuevo contenido resultado de la resta.
- Dependiendo del valor que adquiera newCounter tendrá un color diferente, mantendrá su color negro mientras sea mayor a 20.