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

🔗 Acesse o link do 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.