O desenvolvimento web é estressante e difícil - mas com prática, pode-se dominar na área. Se você estiver disposto a colocar o trabalho e o esforço, poderá se tornar um solucionador de problemas proficiente no cenário de desenvolvimento web.
Uma maneira eficaz de se tornar um grande desenvolvedor é simplesmente construir e resolver desafios. Por isso trouxemos um para você praticar e mostrar seus conhecimentos.
Tente construir um formulário de cartão de crédito com interatividade, replicando o exemplo a seguir:
Para testar suas habilidades de front-end, construa o markup HTML, inclua formatação de número, validação e detecção automática do tipo de cartão via JS. Para entender como detectar o tipo de cartão, siga esta explicação.
Pode utilizar ferramentas a gosto para trazer o formulário à vida (React, Vue, Svelte, etc). Lembre que quanto mais fluído e performático a experiência de uso do formulário, melhor!
Para exercitar seus conhecimentos de lógica e back-end, o seu formulário também deve enviar os dados para um web server que irá tratar esses dados e fazer a validação.
Para auxiliar nisso, criamos um esqueleto em server.js que irá iniciar o seu servidor web em node.js. Para iniciar o servidor, basta rodar $ node server.js no terminal de comando. Acesse a página de exemplo na URL http://localhost:3000.
- Tratamento e validação de formulários.
- Lidar com ouvintes de eventos (por exemplo, quando os campos mudam, os valores são impressos no cartão de crédito).
- Compreender como exibir e posicionar elementos na página, especialmente o cartão de crédito sobreposto ao formulário.
- Tratar requisições GET e POST com dados no webserver.