<table align="right"> <tr> <td> <a href="readme-en.md">🇺🇸 English</a> </td> </tr> <tr> <td> <a href="README.md">🇧🇷 Português</a> </td> </tr> </table>

💳 GenCard Project

<br> <p align="center"> <a href="#-apresentação-em-vídeo-do-projeto">Vídeo</a>   |    <a href="#-tecnologias-utilizadas">Tecnologias</a>   |    <a href="#-sobre">Sobre</a>   |    <a href="#-alguns-destaques">Destaques</a>   |    <a href="#-clonando-o-projeto">Clone</a>   |    <a href="#-contato-dos-contribuintes">Contato</a> </p> <br>

📹 Apresentação em Vídeo do Projeto

Caso o vídeo apresente algum erro, recarregue a página!<br> 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.<br> 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.<br>

📌 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.<br> 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

<table border="2"> <tr> <td align="center"> <details> <summary> <b><a href="https://cursos.alura.com.br/vitrinedev/lucasmacielf">Vitrine.Dev</a> 🪟</b> <table> <tr> <td align="center"> <a href="https://github.com/Luk4x"> <img src="https://avatars.githubusercontent.com/Luk4x" width="150px;" alt="Luk4x Github Photo"/> </a> <br> <a href="https://www.linkedin.com/in/lucasmacielf/"> <sub> <b>Lucas Maciel</b> </sub> </a> </td> </tr> </table> </summary>

| :placard: Vitrine.Dev | Lucas Maciel | | ------------- | --- | | :sparkles: Nome | 💳 GenCard | :label: Tecnologias | sass, regex, imask, sweetalert, nodejs, npm, css-buttons, dom-to-image, vitejs, vanilla-tilt, ui-ball-loaders, javascript, css, html | :camera: Img | <img src="https://user-images.githubusercontent.com/86276393/203431825-53ab2999-90a6-45b1-a6f0-0b199c49b950.png#vitrinedev" alt="vitrine.dev thumb" width="100%"/>

</details> </td> <td align="center"> <b><a href="https://maykbrito.dev/">MaykBrito.Dev</a> 🪟</b> <table> <tr> <td align="center"> <a href="https://github.com/maykbrito"> <img src="https://avatars.githubusercontent.com/maykbrito" width="150px;" alt="Luk4x Github Photo"/> </a> <br> <a href="https://www.linkedin.com/in/maykbrito/"> <sub> <b>Mayk Brito</b> </sub> </a> </td> </tr> </table> </td> </tr> </table> <p align="right"> <a href="#-gencard-project">Voltar ao Topo</a> </p>

Gencard

Install / Use

README