Home Page: https://gabriel-soulcode.github.io/goodpay/
Esta aplicação foi desenvolvida pela SoulCode Academy para desenvolvimento de trabalho colaborativo em sistema CI/CD, utilizando o GitHub Projects como plataforma de gestão de trabalho.
Crie um novo arquivo calculadoraRegraTres.html que possibilite o calculo da regra de três. A calculadora deve ser funcional e intuitiva.
https://www.mobills.com.br/calculadoras/regra-de-tres-simples/
Crie um nova arquivo calculadoraDeDias.html que possibilite o calculo do número de dias. A calculadora deve ser funcional e intuitiva.
https://www.mobills.com.br/calculadoras/quantos-dias-faltam/
Fazendo uso dos recursos de validação do Bootstrap. Crie uma página de cadastro de colaborador com os seguintes campos:
Ao clicar em enviar um modal deve aparecer mostrando que a solicitação foi enviada com sucesso.
Elaborar uma página que lista os funcionários a partir de uma lista de dados e renderiza dentro de uma tabela. Essa página tem uma navbar simples distinta da padrão e da navbar de uso interno.
Documentação disponível:
https://www.geeksforgeeks.org/how-to-creating-html-list-from-javascript-array/
https://getbootstrap.com/docs/5.3/content/tables/
Crie um novo arquivo, dashboard.html. Utilizando a página de exemplos do Bootstrap monte a página Dashboard do sistema GoodPay.
Procurem por exemplos interessantes de Dashboard (os gráficos podem ser apenas imagens representativas).
Crie um novo arquivo tabelaICMS.html. Utilize o mecanismo de tabelas do Bootstrap para criar uma tabela com valores do ICMS.
Adição de um campo que fará parte da testagem de Login para verificação de humanidade. Execute os ajustes necessários para justificar e alinhar o Login estabelecendo um padrão de visualização.
Veja o modelo:
Crie um novo arquivo, soulcode.html. Essa página se destina a descrever a EdTech com foco em inclusão e impacto social. Apresentar dentro da página do goodpay como um projeto prático para dar imersão aos alunos.
Adição de um modal informativo para cada um dos cartões no carrossel de card group (montar eles também), de acordo com a imagem a seguir devemos adicionar um discreto botão para abrir um modal de informações com o modelo também na imagem a seguir para mais informações do cartão.
Utilização de base:
Utilize o Modal Large. Veja na documentação:
Aplique ao modal um card horizontal. Veja:
Links da documentação https://getbootstrap.com/docs/5.3/components/modal/#using-the-grid [Grades do Modal] https://getbootstrap.com/docs/5.3/components/modal/#optional-sizes [Modal Large] https://getbootstrap.com/docs/5.3/components/card/#horizontal [Horizontal Card]
Simular uma página de configurações do usuário da aplicação com checkboxes ou radio buttons.
Ao marcar uma das preferências, esta deve ficar salva mesmo recarregando a página.
https://developer.mozilla.org/pt-BR/docs/Web/API/Window/localStorage
Sugestão de preferências:
Crie um novo arquivo, quiz.html. Desenvolva um Quiz de perguntas relacionadas ao âmbito financeiro.
Utilize como modelo o exemplo a seguir:
Criar um rodapé seguindo um bom UX/UI e exemplos de mercado com Bootstrap. Este rodapé deverá ser salvo em um arquivo components/rodape.html. Para que outras tasks que construam novas páginas ou atualizem elas utilizem o mesmo padrão. Caso esta task esteja sendo realizada após a construção de páginas, o rodapé deverá ser então adaptado as páginas já existentes, aumentando a complexidade do cartão (120 -> 160).
Veja um exemplo de rodapé:
Criar uma nova página, politicaeprividade.html, com base em exemplos da internet. Preservando o design pré-estabelecido do goodpay.
Crie um nova arquivo calculadoraFGTS.html que possibilite o calculo do valor do FGTS. A calculadora deve ser funcional e intuitiva.
Com base nos métodos de window.navigator, mostre na página de index.html a longitude e latitude do usuário dentro de um toast do Bootstrap assim que a página for carregada.
Em caso de sucesso:
Em caso de falha:
Exemplos:
https://www.w3schools.com/jsref/prop_nav_geolocation.asp
https://getbootstrap.com/docs/5.3/components/toasts
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
Crie um novo arquivo, devTeam.html. A página deve ter informações sobre TODOS os membros do time (RN1).
Um carrossel (ou grid) com cards e informações dos estudantes e professores.
Obs: Solicitar a um professor as informações.
Crie um novo arquivo calculadoraPorcentagem.html que possibilite o calculo da porcentagem simples. A calculadora deve ser funcional e intuitiva.
https://www.mobills.com.br/calculadoras/calculadora-de-porcentagem/
Promover na página de cadastro alguns cards com imagens promocionais do goodpay. Esses cards devem possuir um botão que ao ser clicado abre um modal com mais informações a respeito da promoção especifica.
Crie um novo arquivo, app.html. Utilizando a página de exemplos do Bootstrap monte a página interna do sistema GoodPay.
Desenvolva uma UX amigável e agradável para recepcionar o usuário logado ao sistema.
Crie um nova arquivo calculadoraJurosCompostos.html que possibilite o calculo de juros compostos. A calculadora deve ser funcional e intuitiva.
https://www.mobills.com.br/calculadoras/calculadora-juros-compostos/
Crie um novo arquivo, parceiros.html. Utilizando a página de exemplos do Bootstrap monte a página Parceiros do sistema GoodPay.
Utilizar imagens de logo dos parceiros do site oficial (https://soulcode.com/)
Utilizando a documentação do Bootstrap, desenvolva uma página de cadastro com nome de arquivo cadastro.html, ela deve ser chamada ao clicarmos no botão de cadastrar-se. As imagens a seguir mostram como deverá ser executado.
Utilize validação dos campos com Bootstrap.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Modules
Crie um novo arquivo, assinaturas.html. Mostrar os planos oferecidos pelo Goodpay e os respectivos benefícios e preços. Utilizem as mídias disponíveis. E usem como inspirações outras páginas com planos de assinatura.
Veja o exemplos:
https://ofertasbrisanet.com.br/
Faça um toast na página app.html que conforme a conexão com a internet falhe mostre um toast como mostra a seguir:
Obs: O toast só deve desaparecer quando a conexão com a internet for estabelecida.
Referências:
https://getbootstrap.com/docs/5.3/components/toasts/#usage
https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event
Na barra de navegação lateral, crie formulário representativo de login para possibilitar o signin do usuário no sistema Goodpay.
Veja o modelo:
Com base no login realizado pelo usuário, deve-se salvar os dados na seção a respeito do usuário logado. Caso a index.html seja aberta e esteja salvo alguma informação de login na seção, ao invés de continuar na index.html o usuário deverá ser levado automaticamente para app.html e um modal deve ser aberto para dar boas-vindas de volta ao usuário.
https://developer.mozilla.org/pt-BR/docs/Web/API/Window/sessionStorage
Imagem de exemplo:
Seguindo as dicas de diversos sites, aplicar boas práticas de SEO nas principais páginas da aplicação: index.html.
Deverá ser criado um arquivo components/metas.html com as principais meta tags para padronizar o goodpay.
https://neilpatel.com/br/blog/meta-tags/
https://ahrefs.com/blog/seo-meta-tags/
https://ahrefs.com/blog/open-graph-meta-tags/
Posteriormente, conforme as demandas uma nova task deverá surgir com objetivos de padronização.
Crie um novo arquivo chamado objetivosFinanceiros.html. Nesta página desenvolva uma lista de objetivos financeiros de acordo com o que o usuário preencher em um formulário. O formulário deve conter os campos para preencher:
Veja o exemplo:
Crie um novo arquivo, perfil.html. Está página deve simular uma eventual página de perfil do usuário logado na aplicação.
Na página de recuperar senha, quando o usuário colocar os dados válidos, um modal deverá aparecer indicando para o usuário verificar a caixa de entrada do e-mail. Além disso deve-se mostrar o e-mail dentro do modal.
Crie um novo arquivo, recuperarSenha.html. Está página deve incluir itens básicos da página de recuperação de senha e montagem elegante de seu UX com Bootstrap.
Utilize validação nos campos com Bootstrap.
Documentação de Validação:
https://getbootstrap.com/docs/5.3/forms/validation/
Esta página deve listar as contas bancárias do usuário e outras fontes de renda junto com o saldo atual.
Crie um novo arquivo, promocoes.html, onde uma promoção é selecionada e é realizada um sorteio com base nos nomes no campo de texto.
Os nomes devem ser separados por quebra de linha no campo de texto, e apenas um deles deve ser sorteado. O resultado do sorteio pode ser exibido com modal do Bootstrap.
Documentação disponível:
https://www.w3schools.com/JS/js_random.asp
https://www.w3schools.com/jsref/jsref_split.asp
https://www.w3docs.com/snippets/javascript/how-to-get-the-value-of-text-input-field-using-javascript.html
Crie um novo arquivo, mapa.html. Nesta página deve conter um mapa do site Goodpay utilizando quaisquer recursos visuais (tabelas, cards, etc). O cliente pode solicitar a atualização deste mapa com base nos requisitos e um novo card será gerado. Para as páginas ainda não criadas usar # no href.
https://www.microsoft.com/pt-br/sitemap.aspx
https://portaltransparencia.gov.br/mapa-do-site
http://www.setic.rj.gov.br/mapa_site
Posteriormente uma nova task deverá ser criada para atualizar os links do mapa do site.
Criar página de login social com botões para conectar o goodpay ao: google, apple, facebook, github, twitter, linkedin e amazon.
Veja o exemplo (https://accounts.spotify.com/pt-BR/login):
Monte um sistema de ajuda elegante no menu lateral para auxiliar a navegação da aplicação de acordo com os casos de uso. Também modifique o modal de erro de senha para informar ao usuário o motivo de sua não entrada no sistema.
Use como exemplo as imagens a seguir:
O uso de elementos que ajudem na acessibilidade devem ser utilizadas, tais como o software VLibras:
https://vlibras.gov.br/doc/widget/installation/webpageintegration.html
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML
https://medium.com/reprogramabr/como-escrever-html-com-acessibilidade-eb5fb1a6af5a
A princípio a página priorizada deve ser a index.html. Posteriormente uma task deverá padronizar para as outras páginas.
Crie um novo arquivo, ebank.html. Uma página de banco digital do goodpay. Seguindo bons princípios de design e responsividade, conforme os exemplos de bootstrap.
Crie um novo arquivo, controleFinanceiro.html. Nela deve-se montar uma página dinâmica que adiciona despesas e receitas de acordo com os valores passados:
Documentação disponível:
https://www.geeksforgeeks.org/how-to-creating-html-list-from-javascript-array/
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Template_literals
https://careerkarma.com/blog/javascript-innertext-innerhtml/#:~:text=The%20JavaScript%20innerHTML%20property%20sets%20the%20HTML%20contents,of%20a%20%3Cp%3E%20element.%20Find%20Your%20Bootcamp%20Match
https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML
https://www.stechies.com/format-number-currency-string-javascript/#:~:text=In%20JavaScript%2C%20the%20most%20prevalent%20and%20the%20easiest,lets%20users%20format%20numbers%20operating%20custom%20locale%20parameters.
Na pagina principal, crie uma grade de Cards para melhorar a publicidade da página. Utilize o material de imagens disponível.
Utilize o mecanismo de Grid do Bootstrap.
Veja o exemplo:
Crie um novo arquivo, quemSomos.html. Utilizando a página de exemplos do Bootstrap monte a página Quem Somos do sistema GoodPay.
Crie uma nova Navbar para utilização das páginas internas da aplicação: app.html e dashboard.html. Essa NavBar deverá simular um usuário logado.
Exemplo:
A NavBar deverá ser salva no arquivo components/navbar.html para ser utilizada posteriormente.
Use como base exemplos de cabeçalhos do Bootstrap.
Crie um novo arquivo, faq.html. Utilizando a página de exemplos do Bootstrap monte a página FAQ do sistema GoodPay.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
