freeCodeCamp/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md

---
id: bd7158d8c442eddfaeb5bd13
title: Construye una máquina de frases aleatorias
challengeType: 3
forumTopicId: 301374
dashedName: build-a-random-quote-machine
---

# --description--

**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.

Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.

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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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--

```js
// solution required
```