Aula 03 da Formação Vem ser Tech - Criando um Formulário de Agendamento Completo com Front-End:

 



Na aula 03 da Formação Vem ser Tech, uma parceria entre a Ada Tech e o iFood, tivemos a oportunidade de aprofundar nossos conhecimentos em front-end, colocando em prática diversos conceitos para criar um formulário de agendamento completo.

Neste post, vamos explorar o que aprendemos e como aplicamos esses conceitos para proporcionar a melhor experiência ao usuário.


Formulário Semântico e Acessibilidade:

Um dos pilares do desenvolvimento web responsável é a semântica e a acessibilidade. Na criação do nosso formulário, aplicamos esses conceitos para garantir que todos os usuários, independentemente de suas capacidades, possam utilizá-lo de forma eficaz. Para isso, utilizamos elementos semânticos como "label," "fieldset," e "legend" para melhorar a estrutura e a compreensão do formulário.


Campos do Formulário:

  • Nome (campo obrigatório): O nome é uma informação fundamental. Tornamos esse campo obrigatório para garantir que o usuário não esqueça de preenchê-lo.

  • Idade (maior de 18 anos): Para restringir o agendamento a maiores de idade, adicionamos uma validação que exige que o usuário tenha pelo menos 18 anos.

  • Telefone (campo obrigatório): Para manter a consistência, seguimos o padrão "XX-XXXXX-XXXX" para números de telefone, como "11-99999-9999."

  • Gênero: Incluímos opções para o gênero do usuário, tornando o formulário inclusivo.

  • Data de Nascimento (campo obrigatório): Para evitar datas inválidas, validamos que a data de nascimento esteja entre 01/01/1900 e 01/01/2005.

  • Horário de Atendimento (campo obrigatório): Definimos um horário de atendimento entre 7:00 e 17:00 para garantir que o agendamento ocorra dentro dessas horas.

  • Lista de Hobbies (pelo menos 7 opções, seleção múltipla): Oferecemos aos usuários uma variedade de hobbies para escolher, permitindo seleção múltipla para acomodar diferentes interesses.

  • Seleção de Cor Preferida (pelo menos 7 cores): Da mesma forma, fornecemos opções de cores para a preferência do usuário.

  • Botão Enviar: O botão "Enviar" permite que os usuários enviem o formulário quando estiverem prontos

  • Botão Limpar: O botão "Limpar" oferece a opção de reiniciar o formulário, caso o usuário deseje começar de novo.


Requisitos Técnicos:

Utilizamos elementos semânticos como "label," "fieldset," e "legend" para melhorar a acessibilidade e compreensão do formulário.

Criamos classes no CSS para estilizar o formulário, seguindo as melhores práticas de organização de código.

Aproveitamos variáveis no CSS para manter o código mais organizado e facilitar futuras atualizações de estilo.


Stack Utilizada:

HTML: A estrutura do formulário foi construída usando HTML.

CSS: Utilizamos CSS para estilizar o formulário, aplicando classes e variáveis.

Bootstrap: Possivelmente, utilizamos o framework Bootstrap para facilitar a criação do formulário, economizando tempo e esforço.

JavaScript: Para adicionar as validações e a lógica interativa ao formulário, aplicamos JavaScript.


Recursos Adicionais:

Para complementar gostaria de compartilhar as anotações que você fiz durante a aula 03. 


Conclusão:

Na aula 03 da Formação Vem ser Tech, mergulhamos no emocionante mundo do desenvolvimento front-end, criando um formulário de agendamento completo. A aplicação prática dos conceitos de semântica, acessibilidade e validação proporcionou uma experiência de usuário aprimorada, garantindo que nosso formulário seja inclusivo e eficaz.

A combinação de tecnologias como HTML, CSS, Bootstrap e JavaScript desempenhou um papel fundamental na criação deste projeto. A estruturação semântica e a organização eficiente do código CSS com variáveis são aspectos que enfatizamos para manter nosso código limpo e de fácil manutenção.


Se você quiser dar uma olhada mais de perto em como criamos esse formulário e experimentá-lo, convido você a conferir o repositório do projeto no GitHub: Repositório do Projeto. Lá, você encontrará o código-fonte e todas as informações necessárias para explorar o projeto.

Além disso, você pode ver o formulário de agendamento em ação visitando o Projeto. Experimente o formulário e veja como aplicamos os conceitos que discutimos nesta postagem.


Espero que esta aula tenha sido tão empolgante para você quanto foi para mim. Lembre-se de que a prática é a chave para aprimorar suas habilidades de desenvolvimento front-end, e este projeto é um ótimo ponto de partida. Se tiver alguma dúvida ou feedback, não hesite em compartilhar nos comentários do repositório ou do projeto. Estamos todos aqui para aprender e crescer juntos.