Skip to content

Clone simples da Interface do aplicativo PicPay, para exercício de aprendizagem.

License

Notifications You must be signed in to change notification settings

JessicaSaantos/PicPro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

banner



PicPro


GitHub

Descrição:

🔗Projeto PicPro: Clone simples da Interface do aplicativo PicPay, a Carteira Digital feita para descomplicar a vida financeira de seus usuários, facilitando pagamentos, transferências e saques. Esse projeto contém o mesmo padrão do conteúdo principal do app que é a apresentação com informações do usuário, o menu inicial de navegação e o rodapé. Nele é possível fazer a navegação entre as principais seções da página, selecionando a forma de pagamento.


Tecnologias Utilizadas:

GitHub language count GitHub top language

Marcação Estilização Programção
Html Css JavaScript
5 3 ECMAScript 2018

Aprendizados:

📚 Através desse projeto foi possível exercitar o uso do conceito de Flexbox para organizar os elementos dentro de containers de forma dinâmica, também do atributo hover que permite mudanças de estilos quando o cursor do mouse passa em algum elemento da página HTML, no PicPro esse efeito acontece no menu de seleção de pagamento.

Além disso, foi interessante usar a linguagem JavaScript para tornar a página interativa, tornando possível a mudança de seção ao selecionar uma forma de pagamento específica. Usando DOM, para manipular elementos do documento HTML, funções para executar tarefas como identificar ação de click em elementos específicos e também loop para omitir as seções não selecionadas.

Foram usados nesse programa estrutura de repetição (for), estrutura condicional simples (if), além de alguns comandos para acionar eventos, chamar funções e orgazinar a apresentação do resultado final para o usuário. As Funções foram usadas também para dividir as etapas de funcionalidades do programa, deixando assim o código mais organizado e limpo.

🔗 Esse desenvolvimento foi realizado em uma maratona de aulas da escola Kenzie Academy Brasil e apresentado no canal do YouTube da Kenzie.


O Projeto

Estrutura de arquivos

  • README.md
  • index.html
  • /assets
    • /css
      • style.css
    • /img
    • /js
      • script.js

Status do Projeto:

Concluído ✔️ Objetivo principal do projeto está finalizado. Mas outras funcionalidades poderão ser adicionadas ao PicPro.

Possíveis funcionalidades:

  • Interface Principal
  • Seleção de forma de pagamento
  • Responsividade
  • Omitir o valor de saldo
  • Abrir o chat do App

Demonstração:

🎥📷

Animação

Pré-requisitos:

Navegador web: Chrome/Edge
Para ver o funcionamento é só clicar aqui
Para extrair o arquivo e trabalhar com o código é bom ter um editor como VSCode por exemplo.

About

Clone simples da Interface do aplicativo PicPay, para exercício de aprendizagem.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published