Contact Form Solution

Community feedback

• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 4 months ago

  Olá Alessandra, parabéns pela conclusão do projeto, ele ficou muito bem feito e quase semelhante ao design proposto.

  Sobre o problema que você teve em gerenciar os botões de radio, ele está correto, você utilizou o atributo name que faz com que eles fiquem interligados, e que apenas um possa estar marcado por vez, então sim, está correto.

  Uma dica sobre seu HTML, ele está bem estruturado mas está pouco semântico, e é importante deixar o HTML semântico não só por questão de SEO mas também por questão de acessibilidade, então mostrarei alguns exemplos que podem ser alterados:

  • <div class="message-sent-div hidden"> faria mais sentido ser um <article>, isso porque esse card é autoexplicativo e pode ser reutilizável também, então um <article> faria mais sentido semântico do que um <div> que é pra algo mais genérico.
  • <div class="consent-div"> poderia ser alterado para uma <section> pois é uma secção de itens correlacionados entre si.
  • <div class="query-type-div"> também poderia ser alterado para uma <section>.

  Agora sobre seu JS, notei que tem um pequeno problema, nos inputs de nome e sobrenome, nós podemos digitar um valor numérico e ainda sim não irá dar erro, então isso abre uma brecha. Para corrigir isso você pode utilizar as RegExp para criar uma expressão regular que aceite apenas caracteres alfabéticos, assim ficando mais coerente. Que se não me engano ficaria assim: ^[A-Za-z]+$

  Agora algumas sugestões, primeiramente sobre o nome das classes, notei que você estava dando o nome das classes baseado no que elas são e na tag HTML, exemplo message-p, isso em projetos pequenos funciona até que bem, mas em projetos grandes pode começar a ter conflitos e dar problemas, então eu gostaria de sugerir que você desse uma olhada na Metodologia BEM, que dessa forma você consegue dar nome para as classes de forma mais coesa. Sparkbox - BEM.

  E é isso, novamente parabéns pela conclusão do projeto, continue praticando e se aprimorando. Caso algo que eu tenha dito não tenha ficado claro, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  0