Tutorial
Input de cartão de crédito com JS
Nível
15 aulas
1h23
Assistir agora
1. Introdução
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Input de cartão de crédito.
Descrição do projeto
Exercite seus conhecimentos em JavaScript, HTML e CSS para criar uma página de input de cartão de crédito.
🔨 Requisitos
- Desenvolva a aplicação mobile-first.
- Utilize apenas HTML, CSS e JavaScript.
- Crie uma página que renderiza um cartão de crédito e um formulário.
- Os inputs do formulário deverão capturar as informações em tempo real.
- Ao digitar em um campo, as informações do cartão de crédito deverão ser atualizadas automaticamente.
- Implemente o cartão com as seguintes informaçoes:
- Número.
- Nome do(a) portador(a).
- Data de validade, no modelo
mm/YY
. - Código de segurança (CVV).
🔨 Desafios extras para quem quer ir além
- Implemente a frente e o verso do cartão
- Adicione o CVV apenas no verso do cartão.
- O verso do cartão só deverá ser visível enquanto o input que representa o CVV estiver selecionado.
🎨 Design Sugerido
Temos uma sugestão de design no Figma. Mas sinta-se livre para utilizar a criatividade e fazer o seu próprio design.
Screenshot
Figma
👉🏽 Sobre esse mini-projeto
Tecnologias sugeridas
HTML, CSS e JavaScript
❓ FAQ
Posso utilizar React ou outras bibliotecas?
Você pode utilizar as ferramentas que desejar para implementar esse projeto. Porém, o objetivo principal aqui é exercitar os fundamentos de HTML, CSS e JavaScript e a resolução oficial será implementa dessa maneira.
Posso utilizar frameworks de estilo?
Sim! Apesar do objetivo principal desse projeto ser exercitar suas habilidades com CSS puro, fique à vontade para utilizar as ferramentas que desejar.
Seu Instrutor
Aulas
- Introdução
- 1.
Introdução
00:45 - 2.
Requisitos do Projeto
03:10 - 3.
Iniciando o Projeto e limpando os arquivos
03:05 - HTML
Criando a estrutura do HTML
05:57- CSS
CSS: Criando o Layout
05:07CSS: Estilizando o Cartão
08:53CSS: Estilizando o Formulário
08:30- JS e Interatividade
JS: Acessando os elementos HTML
06:48JS: Formatando o número do cartão
09:19JS: Transpondo outros campos para o cartão
02:39JS: Aceitando apenas dígitos numéricos
03:02Criando o verso do cartão
07:15Fazendo o verso aparecer automaticamente
03:02Animando a rotação do cartão
07:18Responsividade para Mobile
08:48