Design comparison
Solution retrospective
This was my first junior challenge on Frontend Mentor. Feedback is welcome.
Community feedback
- @danielmrz-devPosted 8 months ago
Oi @flaviare1s!
Parabéns pelo seu primeiro projeto nível Junior! 😊
Tenho algumas sugestões:
- A primeira vez que vi sobre o checkValidity() foi em um projeto seu, e eu já tinha feito projetos que precisavam de validações e ainda assim, nunca tinha ouvido falar desse método. Fui pesquisar pra aprender a usar e é bem legal. Só fique atenta às limitações, pois o checkValidity checa a se input é válido de acordo com os atributos que você coloca nesse input. No seu caso, você usou os atributos type e required, ou seja, ele vai validar se tem um arroba no meio do texto digitado e também vai dar erro se ficar vazio.
Você consegue adicionar mais validações usando if/else com javascript, tipo: Se o email tiver mais de 30 caracteres, a mensagem de erro mostra uma mensagem dizendo que o email está muito longo. (Esse é apenas um exemplo, você consegue validar da forma que quiser).
Resumindo, o HTML já te fornece essa forma de validação e o Javascript te ajuda a tornar essa validação ainda mais robusta e com mensagens de erro personalizadas pra cada tipo de erro.
-
A segunda sugestão é você capturar o valor digitado no input e jogar ele dentro desse elemento
<span class="font-bold">[email protected]</span>
na tela de "Thanks for subscribing". No momento, não importa o email digitado, lá sempre aparece esse mesmo email [email protected]. E na verdade essa mensagem diz que enviou uma mensagem de confirmação pro email do usuário, não esse email exemplo. -
Última sugestão: Coloca um link pro seu
index.html
dentro do botão "Dismiss message". Assim, quando o usuário clicar, ele será redirecionado pra tela inicial.
Espero que as sugestões ajudem!
Fora isso, seu projeto ficou excelente!
Marked as helpful1@flaviare1sPosted 8 months ago@danielmrz-dev , obrigada pelo feedback e pelas sugestões, ajudaram muito! Não vejo a hora de chegar em casa e fazer essas alterações! 😊
1@flaviare1sPosted 8 months ago@danielmrz-dev , no caso de colocar um maxlenght, o checkValidity serviria para esse exemplo do e-mail longo que você citou?
1@danielmrz-devPosted 8 months ago@flaviare1s Serviria, mas vou tentar explicar melhor. Se você pegar um input e der
console.log(input.validity)
, vai aparecer isso no console do DevTools:ValidityState tooLong: false tooShort: false valid: true valueMissing: false
Aparece uma lista maior do que essa, mas eu peguei só esses 4 pra facilitar o entendimento.
Cada um desses tipos de erro estão vinculadas a atributos que você coloca no input no HTML. Por exemplo, nesse caso acima, o
valid
está comotrue
porque eu não coloquei nenhum atributo no HTML, mas se eu colocasserequired
no HTML, ovalid
dariafalse
, e ovalueMissing
dariatrue
. A mesma coisa serviria se eu colocasse os atributosminlength
emaxlength
. Se o valor do input for menor do que ominlength
, o errotooShort
daria verdadeiro. E se o valor digitado no input for maior do que omaxlength
, o errotooLong
daria verdadeiro. E assim por diante.Parece complicado porque mistura a validação do HTML com Javascript, mas uma vez que você entende como usar, fica um pouco mais fácil.
Marked as helpful1
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