🔗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.
| Marcação | Estilização | Programção |
|---|---|---|
| Html | Css | JavaScript |
| 5 | 3 | ECMAScript 2018 |
📚 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
- /css
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.