/challenge-twitter

Primary LanguageJavaScript

Twitter Challenge

  • Track: Common Core
  • Curso: Creando tu primer sitio web interactivo
  • Unidad: Creando interacción con JavaScript

Objetivo

El reto consiste en replicar el newsfeed de Twitter, este será el resultado a lograr:

Newsfeed Twitter

Consideraciones:

  • Versión 0.0.1
  1. Diseñar un formulario que permita ingresar un texto y un botón para "twittear".
  2. Agregar un evento de click al botón o de submit al formulario.
  3. En el evento, obtener el texto.
  4. Agregar el texto al HTML.
  • Versión 0.0.2
  1. No ingresar texto vacío (deshabilitar el botón de "twittear").
  2. Contar la cantidad de caracteres de forma regresiva.
  • Versión 0.0.3
  1. Si pasa los 140 caracteres, deshabilitar el botón.
  2. Si pasa los 120 caracteres, mostrar el contador con OTRO color.
  3. Si pasa los 130 caracteres, mostrar el contador con OTRO color.
  4. Si pasa los 140 caracteres, mostrar el contador en negativo.
  • Versión 0.0.4
  1. Al presionar enter(/n) que crezca el textarea de acuerdo al tamaño del texto.
  • Versión 0.0.5 (Extra)
  1. 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)
  • Versión 0.0.6 (Extra)
  1. Agregar la hora en que se publicó el tweet. En el formato de 24 horas: hh:mm.

Nota: Para dar formato a la fecha y hora, puedes crear tu propia función o usar una librería como moment.js.

Contenido del Repositorio:

  • Contiene una carpeta en el cual hay un archivo base index.html (estructura del proyecto y enlaces CSS y JS). En adición, está el README.md que contiene la explicación de este proyecto.

  • En la carpeta css hay un archivo base main.css ( estilos del proyecto).

  • En la carpeta js hay un archivo base app.js ( códigos del proyecto).

  • La paleta de colores usadas: #56ccf2, #2f80ed.

  • Los principales conocimientos técnicos empleados fueron: DOM, eventos, etc.

Herramientas:

  • VISUAL STUDIO CODE.

Nota:

  • El sitio original tiene ciertos efectos y funcionalidades que están fuera del alcance para este reto. Pero se ha tratado de replicar lo más cercano posible con los conocimientos adquiridos en clase.

Resultado:

Resultado del Proyecto.