Input de cartão de crédito com JS

Workshop

15 vídeos • 01:23:38

Seção 01 | Introdução

  1. 1.

    Introdução

    00:45
  2. 2.

    Requisitos do Projeto

    03:10
  3. 3.

    Iniciando o Projeto e limpando os arquivos

    03:05

Seção 02 | HTML

  1. 4.

    Criando a estrutura do HTML

    05:57

Seção 03 | CSS

  1. 5.

    CSS: Criando o Layout

    05:07
  2. 6.

    CSS: Estilizando o Cartão

    08:53
  3. 7.

    CSS: Estilizando o Formulário

    08:30

Seção 04 | JS e Interatividade

  1. 8.

    JS: Acessando os elementos HTML

    06:48
  2. 9.

    JS: Formatando o número do cartão

    09:19
  3. 10.

    JS: Transpondo outros campos para o cartão

    02:39
  4. 11.

    JS: Aceitando apenas dígitos numéricos

    03:02
  5. 12.

    Criando o verso do cartão

    07:15
  6. 13.

    Fazendo o verso aparecer automaticamente

    03:02
  7. 14.

    Animando a rotação do cartão

    07:18
  8. 15.

    Responsividade para Mobile

    08:48
Login
Workshops>Input de cartão de crédito com JS>Animando a rotação do cartão

Acesso exclusivo para membros PRO

Esse conteúdo é exclusivo para nossos assinantes.

Libere esse e muito mais conteúdo assinando o Codante PRO.

Animando a rotação do cartão

Adicionamos animações ao nosso formulário de cartão de crédito reativo para aprimorar sua interatividade. Usamos CSS para criar duas animações, chamadas FlipCard e FlipCard2, que viram o cartão à medida que o usuário interage com o campo do código de verificação, dando a sensação de girar o cartão completamente.

Comentários

(0)