Design comparison
Solution retrospective
Besides my biggest trouble, the whole challenge was very nice and easy. I see this as a sign that I am, in fact, improving my skills
What challenges did you encounter, and how did you overcome them?My biggest challenge was how to check if there was a radio button selected. I (had to) read a lot, search for references, but in the end I did it. I don't know if I went the right, or easist path but it worked
What specific areas of your project would you like help with?Hello! This is my solution to the contact form challenge.
A disclaimer: I'm not a pro. I'm impoving myself with each challenge I complete
Feedbacks and suggestions are welcome
Community feedback
- @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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord