HTML CSS form

Community feedback

• 

  P

  Dave•5,295

  @dwhenson

  Posted over 3 years ago

  Hey @niranjan-inofty - nice job here! 🙌.

  Here's some feedback you might like to consider:

  • I'd suggest centring the content on the page for this kind of component challenge. I do this by setting a min-height: 100vh and display: grid combined with place-items: center on the body. You can use flex as an alternative to grid if you prefer.
  • Regarding your JS, rather than adding an onclick in your HTML I would suggest using an eventListener in your JS - this is more flexible, and generally a better approach.
  • One other general point, I would suggest adding the novalidate attribute to your form using JS. This way we can use your custom validation if JS loads, and the browser if it doesn't.
  • I would suggest using the generic querySelector method rather than the more specific get by id, classname, name etc. Names and class names can change - I try to use a data attribute as the basis for my JS hooks as this avoids confusion. Here's a nice article on that: https://gomakethings.com/strategies-for-working-with-data-attributes-in-vanilla-javascript/
  • For your isEmptyOrSpaces function you could probably just use trim() on the value to remove whitespace and check if the value is true or false (an empty string is falsy)
  • I like that you have included a separate validation for email, and it seems to work well, which is great.

  My overall advice here is that the code is a bit repetitive, and looks like it could break quite easily! (But it works – so good job!! Everything else is extra.) If you wanted to improve things, I would suggest having a read about event listeners and event delegation.

  I think this approach would be better overall. I've put this challenge on my list to have another go at as I need to redo it!

  Cheers 👋

  Dave

  01

  Marked as helpful
• 

  IRVINE MESA•1,835

  @DrMESAZIM

  Posted over 3 years ago

  @niranjan-inofty this is a perfect .Great work indeed

  00