💳 GenCard

sass
regex
imask
sweetalert
nodejs
npm
css-buttons
dom-to-image
vitejs
vanilla-tilt
ui-ball-loaders
javascript
css
html

🇺🇸 English

🇧🇷 Português

💳 GenCard Project

📹 Apresentação em Vídeo do Projeto

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

🚀 Tecnologias Utilizadas

📝 Sobre

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

Inspirado no RocketPay, o GenCard simula um formulário de preenchimento de cartão de crédito, onde o foco foi praticar a manipulação de elementos HTML via DOM e utilizar o IMask para a validação das informações.
Visto que já tinha esses conhecimentos, aproveitei a oportunidade para dar margem às minhas ideias e explorar mais sobre Regex e Sass, assim desenvolvendo diversas modificações e melhorias, como a criação de validações extras, o desenvolvimento de um CSS mais rebuscado e performático, entre outras citadas na sessão de destaques.

📌 Alguns Destaques

Validações extras;
Mais possibilidades de cartões;
Layout, experiência do usuário e animações melhoradas com o uso de Sass, da lib Vanilla-Tilt, e componentes de Loaders e Buttons.;
Opção de gerar e baixar a imagem do cartão utilizando o Dom-To-Image - funcionalidade essa que pode não ter muito sentido nesse contexto, mas mesmo assim quis pôr em prática essa ideia que me veio a mente;
Modal de feedback para o usuário com informações do mesmo utilizando o SweetAlert;
Projeto totalmente responsivo;

📖 Clonando o Projeto

Para clonar e executar este projeto em seu computador, você precisará do Git e Node.js v16.13.2 ou superior previamente instalados.
Feito isso, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/gencard.git

# Entre no repositório com:
> cd gencard

# Instale as dependências com:
> npm install

# Execute o projeto com:
> npm run dev

# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://localhost:3000/ ou http://127.0.0.1:5173/)

🤝 Contato dos Contribuintes

Vitrine.Dev 🪟

_{Lucas Maciel}

🪧 Vitrine.Dev	Lucas Maciel
✨ Nome	💳 GenCard
🏷️ Tecnologias	sass, regex, imask, sweetalert, nodejs, npm, css-buttons, dom-to-image, vitejs, vanilla-tilt, ui-ball-loaders, javascript, css, html
📷 Img

MaykBrito.Dev 🪟

_{Mayk Brito}

Voltar ao Topo

Veja meu projeto em: https://github.com/Luk4x/gencard