Essa é a minha solução para o desafio do Cartão Interativo - Frontend Mentor. A partir dos desafios do Frontend Mentor consigo praticar minha habilidades de código.
O usuário deverá conseguir:
- Preencher o formulário e e ver os detalhes na imagem do cartão atualizarem em tempo real;
- Não conseguir enviar o formulário se:
- Algum campo dos inputs estiver vazio;
- O número do cartão, data de vencimento e código estiverem no formato errado;
- Conseguir visualizar todo projeto em qualquer tela;
- Ver os efeitos de hover, focus e active inputs ao utilizarem a página;
- Deploy: Veja o resultado
- HTML5 semântico
- Propriedades CSS
- Flexbox
- CSS Grid
- Funções JavaScript
- Responsividade para vários tipos de tela
🟢 Coloquei em prática a utilização do CSS Grid, o qual eu tinha dificuldade (e ainda vejo que posso melhorar);
🟢 Consegui utilizar as funções e objetos em Javascript para a interatividade do site;
🟢 A responsividade junto com position:absolut foi um desafio pessoal que consegui realizar
Tive grande dificuldade na elaboração das funções do JavaScript, porém consegui realizar o desafio me baseando na solução de DrMesazim