Intro component with sign-up form (built-in form validation)
Design comparison
Community feedback
- @jakegodsallPosted 8 months ago
Just one more thing.
It might be useful for you to take a look at the
toggle()
method on theelement.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 helpful0@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 - @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 helpful0 -
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