"Máquina de citas" que genera y muestra citas aleatorias cada vez que el usuario lo solicita. Cada cita consta de un texto de cita y un autor correspondiente.
En la interfaz de la aplicación, el usuario puede ver un contenedor principal que aloja el texto de la cita, el autor de la cita y dos botones interactivos. Cuando se carga la aplicación por primera vez, se muestra una cita aleatoria y su autor en los elementos correspondientes.
El primer botón, con el id "new-quote", permite al usuario generar una nueva cita aleatoria. Al hacer clic en este botón, la aplicación busca una nueva cita y su autor correspondiente, y los muestra en la interfaz.
El segundo botón, con el id "tweet-quote", permite al usuario compartir la cita actual en Twitter. Al hacer clic en este botón, se abre una nueva pestaña o ventana con el texto de la cita y el autor ya llenos en un tweet, listo para ser publicado.
Historias de usuario:
- Visualizar un elemento contenedor identificado por el atributo "id" como "quote-box".
- Ver dentro del elemento #quote-box otro elemento identificado por el atributo "id" como "text".
- Ver dentro del elemento #quote-box otro elemento identificado por el atributo "id" como "author".
- Ver dentro del elemento #quote-box un elemento clickeable identificado por el atributo "id" como "new-quote".
- Ver dentro del elemento #quote-box un elemento clickeable identificado por el atributo "id" como "tweet-quote".
- Al cargar la página por primera vez, que la máquina de cotizaciones muestre una cita aleatoria en el elemento con "id" como "text".
- Al cargar la página por primera vez, que la máquina de citas muestre al azar el autor de la cita en el elemento con "id" como "author".
- Al hacer clic en el botón #new-quote, que la máquina de cotización obtenga una nueva cita y la muestre en el elemento #text.
- Al hacer clic en el botón #new-quote, que la máquina de cotizaciones busque el autor de la nueva cita y lo muestre en el elemento #author.
- Poder twittear la cita actual al hacer clic en el elemento #tweet-quote. El atributo "href" de este elemento debe incluir el camino "twitter.com/intent/tweet" para twittear la cita actual.
- El elemento envolvente #quote-box esté centrado horizontalmente. Realizar pruebas de visualización con el nivel de zoom del navegador al 100 % y con la página maximizada.