3.5 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd13 | Construye una máquina de frases aleatorias | 3 | 301374 | build-a-random-quote-machine |
--description--
Objetivo: Crear una aplicación que sea funcionalmente similar a https://codepen.io/freeCodeCamp/full/qRZeGZ.
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
Historia de usuario #1: Puedo ver un elemento contenedor con un archivo id="quote-box".
Historia de usuario #2: Dentro de #quote-box, puedo ver un elemento con su correspondiente id="text".
Historia de usuario #3: Dentro de #quote-box, puedo ver un elemento con su correspondiente id="author".
Historia de usuario #4: Dentro de #quote-box, puedo ver un elemento en el que se puede hacer clic con su correspondiente id="new-quote".
Historia de usuario #5: Dentro de #quote-box, puedo ver un elemento clickeable a con su correspondiente id="tweet-quote".
Historia de usuario #6: En la primer carga, mi máquina de frases muestra una frase aleatoria en el elemento con id="text".
**Historia de usuario #7:**En el primer cargado, mi máquina de frases muestra al autor de la frase aleatoria en el elemento con id="author".
Historia de usuario #8: Cuando se hace clic en el botón #new-quote, mi máquina de frases debe buscar una nueva frase y mostrarla en el elemento #text.
Historia de usuario #9: Mi máquina de frases debe buscar al autor de la nueva frase cuando se hace clic en el botón #new-quote y mostrarlo en el elemento #author.
Historia de usuario #10: Puedo tuitear la frase actual haciendo clic en #tweet-quote del elemento a. Este elemento a debe incluir la ruta "twitter.com/intent/tweet" en su atributo href para tuitear la frase actual.
Historia de usuario #11: El elemento contenedor #quote-box debe estar centrado horizontalmente. Ejecuta las pruebas con el nivel de zoom del navegador al 100% y la página maximizada.
Puedes construir tu proyecto con usando esta plantilla CodePen y haciendo clic en Save para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
Nota: Twitter no permite que se carguen enlaces en un iframe. Intenta usar el atributo target="_blank" o target="_top" en el elemento #tweet-quote si tu tweet no se carga. target="_top" reemplazará la pestaña actual, así que asegúrate de que tu trabajo esté guardado.
--solutions--
// solution required