Intro component with sign-up form (built-in form validation)

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  Just one more thing.

  It might be useful for you to take a look at the toggle() method on the element.classList to toggle classes on and off an element.

  That way you wouldn’t need to implement separate functions for adding classes and then for removing those same classes.

  element.addEventListener(“onclick”, (event) => {
      event.target.classList.toggle(“hidden”);
  }):
  

  Just removed a bit of redundancy from the JavaScript 😌

  Marked as helpful

  0

  ---

  

  Korney Chervonenko•990

  @KorneyChervonenkoPosted 8 months ago

  @jakegodsall I've tried toggle() and I don't like it. It's difficult to debug. I think it's much easier to understand what is going on when using "add \ remove".

  0
• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  Hi 👋

  Great work with this form. The validation works great.

  A couple of points if you want to keep working on this 😁

  • I'd recommend increasing the viewport width at which the media query is applied for switching the layout, as at ~400px viewport width there still isn't really enough space for a column-based layout. Perhaps it would be better to apply this at around 1000px?

  • The appearance of validation messages causes a layout shift which can be a little jarring for some users. Perhaps implementing a expand/collapse type animation would help. Refer to this codepen I have created if you're interested in implementing this kind of animation for form validation.

  Hope this helps! 😁

  Marked as helpful

  0