---
id: bd7158d8c442eddfaeb5bd13
title: Build a Random Quote Machine
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Construa uma máquina de cotação aleatória
---
## Description
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/qRZeGZ . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! User Story # 1: Eu posso ver um elemento wrapper com um id="quote-box"
. User Story # 2: Dentro de #quote-box
, posso ver um elemento com um id="text"
. User Story # 3: dentro de #quote-box
, posso ver um elemento com um id="author"
. User Story # 4: dentro de #quote-box
, posso ver um elemento clicável com um id="new-quote"
. User Story # 5: dentro de #quote-box
, posso ver um clicável elemento com um correspondente id="tweet-quote"
. User Story # 6: No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com id="text"
. User Story # 7: No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com id="author"
. User Story # 8: Quando o botão #new-quote
é clicado, minha máquina de cotação deve buscar uma nova cotação e exibi-la no elemento #text
. User Story # 9: Minha máquina de cotação deve buscar o autor da nova cotação quando o botão #new-quote
for clicado e exibi-lo no elemento #author
. User Story # 10: Eu posso twittar a citação atual clicando no elemento #tweet-quote
a
. Este a
elemento deve incluir o "twitter.com/intent/tweet"
caminho em que é href
atributo para twittar a cotação atual. User Story # 11: O elemento wrapper #quote-box
deve ser centrado horizontalmente. Por favor, execute testes com o nível de zoom do navegador em 100% e a página maximizada. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```