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.