🔗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.

📚 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.

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

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

🎥📷

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.