Base Apparel coming soon page

Community feedback

• 

  P

  Vander Santos•1,750

  @vandermsPosted almost 3 years ago

  Nice work! I saw your JS script and the only thing I would change is instead of using the click event on the submit button you should have used the submit event on the form itself. One reason for that is that pressing enter also submits a form.

  Marked as helpful

  4

  ---

  

  Herson•220

  @HersonmeiPosted almost 3 years ago

  Excellent tip! Thank you very much @vanderms!

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hello

  The issues here are more with the form structure than js, as there's some foundational important things to know when working with forms

  • the alert paragraph needs to be inside the form
  • the alert paragraph needs to be linked to the input it relates to. You do that with aria-describedby on the input, pointing to an ID of that inputs error message element (the alert paragraph in this case)
  • the alert paragraph also needs an aria-live attribute so it gets announced to screenreaders when there is an error
  • email input needs to be type email not text
  • email input needs labelling (placeholder is not a label)
  • submit button needs labelling. I would leave the alt blank on the image and include some Sr-only text in the button. Alternatively you could change the img alt to say something like "submit" but it would be announced to screenreaders like "button, image, submit" which is a little strange imo

  Unrelated to the form

  • alt logo makes no sense - you're hiding the most important info on the page from search engines and screenreaders there. What is the name of the site/product
  • alt of woman is a pretty meaningless description of an image. If this is a meaningful image, it needs a proper description, otherwise if you consider it decorative alt should be blank

  As already suggested above, your js should be firing on the form submit not button click.

  I'd also suggest splitting out your functions

  • function isValid
  • function checkFieldValidity
  • form addEventListener submit, check Field

  That pattern would be easily refactored later to loop over multiple fields and check them

  Hope this helps

  Marked as helpful

  1

  ---

  

  Herson•220

  @HersonmeiPosted almost 3 years ago

  @grace-snow

  Thank you very much Grace!

  I tried my best to make all the corrections you indicated, I did the introduction of an accessibility course and it was interesting to know a little more about it.

  Thank you so much for all your contribution!

  0
• Account deleted

  Hi there 👋

  Congratulate on finishing your project 🎉. You did a great job 💡

  I give some suggestions to help you take your project design to the next level 📈😉

  • Add some hover effect to the submit button 💡

  Happy coding ☕

  Maqsud

  Marked as helpful

  1

  ---

  

  Herson•220

  @HersonmeiPosted almost 3 years ago

  The button with the hover effect is much better. Thank you for the tip @maqsudtolipov! Hover effect added!

  1
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Wow nice work man.

  0

  ---

  

  Herson•220

  @HersonmeiPosted almost 3 years ago

  Thanks @Phalcin! ;)

  0