Projeto desenvolvido durante o evento exclusivo e gratuito, promovido pela Rocketseat para ensinar sobre tecnologias Web.

Objetivo   |    Tecnologias   |    Projeto   |    Layout   |    Licença

Esse projeto propôs ensinar algumas funcionalidades da linguagem JavaScript, como:

• Manipulação da DOM com JS.
• Adicionar e capturar eventos.
• Remover ação padrão de recarregar a página ao clicar no botão do formulário.
• Utilizar códigos de terceiros, como o IMask.js que permite criar máscaras para os inputs.
• Acessar uma função através do globalThis pelo DevTools.

Projeto desenvolvido com as seguintes tecnologias:

• HTML5 e CSS3
• JavaScript e JSON
• Node e NPM
• Vite
• iMask

O Rocketpay é um componente que simula o formulário de preenchimento de cartão de crédito, onde é possível adicionar máscara aos inputs e atualizar elementos (HTML) via DOM.

No projeto foi implementado máscaras dinâmicas para reconhecer qual a bandeira do cartão apenas digitando os primeiros números do cartão.

As máscaras implementadas foram visa e mastercard, deixando como desafio implementar as outras mais conhecidas.

Então foram implementados as bandeiras, elo e american express, além da mudança do layout feita nos cartões.

Você pode visualizar o layout dos cartões e do formulário através desse link. É necessário ter conta no Figma para acessá-lo.

Esse projeto está sob a licença MIT.