As duas histórias de usuário faltantes;✅Imagem dinamica de acordo com o autor;✅footer.✅- cores aleatórias;
Criar uma máquina de citação aleatória Objetivo: criar uma aplicação que funcione de modo semelhante ao que vemos em: https://random-quote-machine.freecodecamp.rocks/.
Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto 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. ✅
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.
- HTML
- CSS
- JavaScript
- React