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

---
id: bd7158d8c442eddfaeb5bd13
title: Criar uma máquina de citação aleatória
challengeType: 3
forumTopicId: 301374
dashedName: build-a-random-quote-machine
---

# --description--

**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.

Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.

Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!

**História de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente.

**História de usuário nº 2:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="text"` correspondente.

**História de usuário nº 3:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="author"` correspondente.

**História de usuário nº 4:** dentro de `#quote-box`, eu consigo ver um elemento clicável com o `id="new-quote"` correspondente.

**História de usuário nº 5:** dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o `id="tweet-quote"` correspondente.

**História de usuário nº 6:** ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`.

**História de usuário nº 7:** ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`.

**História de usuário nº 8:** quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`.

**História de usuário nº 9:** minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`.

**História de usuário nº 10:** eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual.

**História de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada.

Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.

**Observação:** o Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` vai substituir a aba atual para garantir que o seu trabalho foi salvo.

# --solutions--

```js
// solution required
```