3.6 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd13 | Criar uma máquina de citação aleatória | 3 | 301374 | build-a-random-quote-machine |
--description--
Objetivo: criar uma aplicação no CodePen.io que tenha função semelhante a esta: https://codepen.io/freeCodeCamp/full/qRZeGZ.
Atenda às especificações de usuário 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!
Especificação de usuário nº 1: eu consigo ver um elemento wrapper com o id="quote-box" correspondente.
Especificação de usuário nº 2: dentro de #quote-box, eu consigo ver um elemento com o id="text" correspondente.
Especificação de usuário nº 3: dentro de #quote-box, eu consigo ver um elemento com o id="author" correspondente.
Especificação de usuário nº 4: dentro de #quote-box, eu consigo ver um elemento clicável com o id="new-quote" correspondente.
Especificação de usuário nº 5: dentro de #quote-box, eu consigo ver um elemento clicável a com o id="tweet-quote" correspondente.
Especificação 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".
Especificação 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".
Especificação 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.
Especificação 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.
Especificação 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.
Especificação 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 usando este template CodePen 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--
// solution required