Skip to content

nikedia/challenge-trello

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Trello Challenge

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

Objetivo:

El reto consiste en replicar el tablero de Trello, este será el resultado a lograr:

Newsfeed Twitter

Consideraciones:

  • Versión 0.0.1
  1. Se mostrará el texto "Añadir una lista ...".
  2. Al hacer click se debe ocultar el texto y mostrar un formulario.
  3. El formulario está conformado por un input y un botón para que pueda añadir tareas a tu lista.
  • Versión 0.0.2
  1. Al dar click en el botón de "Guardar", se mostrará un nuevo cuadro donde estará el nombre de la lista agregada.
  2. Mostrar un texto de "Añadir una tarea" dentro de la lista.
  • Versión 0.0.3
  1. Al dar click en "Añadir una tarea", deberá mostrar un formulario con un textarea y un botón que diga "Añadir".
  • Versión 0.0.4
  1. Poner focus al input al dar click en "Agregar nueva tarea".

  2. Al dar click en el botón de "Añadir", deberá aparecer el texto de la tarea debajo del título de la lista.

  • Versión 0.0.5
  1. Poner focus al input al dar click en "Agregar nueva tarea". Al dar click en el botón de "Añadir", deberá aparecer el texto de la tarea debajo del título de la lista.
  • Versión 0.0.6 (Extra)
  1. Poder agregar múltiples listas con tarjetas. Para esto, el formulario de "Añadir una lista" debe aparecer a la derecha de la lista anteriormente creada.

Contenido del Repositorio:

  • Contiene una carpeta en el cual hay un archivo base index.html (estructura del proyecto, enlaces CSS y código 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).

  • En la carpeta assets, están las carpetas Fonts y Icons (fuentes e íconos del proyecto).

  • La paleta de colores usadas: #0079BF, #026aa7, #4D95BE.

  • 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.