/mp-input-cartao-de-credito

GNU General Public License v3.0GPL-3.0

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

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.