freeCodeCamp

4.1 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7158d8c442eddfaeb5bd13	Build a Random Quote Machine	true	3		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. Bom divertimento! História de usuário # 1: Eu posso ver um elemento wrapper com um id="quote-box" . História de usuário # 2: Dentro de #quote-box , posso ver um elemento com um id="text" . História de usuário # 3: dentro de #quote-box , posso ver um elemento com um id="author" . História de usuário # 4: dentro de #quote-box , posso ver um elemento clicável com um id="new-quote" . História de usuário # 5: dentro de #quote-box , posso ver um clicável elemento com um correspondente id="tweet-quote" . História de usuário # 6: No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com id="text" . História de usuário # 7: No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com id="author" . História de usuário # 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 . História de usuário # 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 . História de usuário # 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. História de usuário # 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

tests: []

Challenge Seed

Solution

// solution required

4.1 KiB Raw Blame History