Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sign Up form with Vanilla JS

#jss#sass/scss#accessibility
Dušan Lukić 1,660

@dusanlukic404

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my second project with Vanilla JS, and I am totally in love how we can make web sites/applications more dynamic with it. 😍 Every suggestion is welcomed 😁

Community feedback

P
Dave 5,245

@dwhenson

Posted

Hey @dusanlukic404 lovely job here! 👍- Bit of a tricky one this for sure! Here's some thoughts and suggestions:

  1. On small viewports the padding on .tryit class seems to be forcing the text to wrap a lot. I think you could just remove it or lower it down from 10em?

  2. In order to stop the layout shift when there's a validation error, I would suggest using visibility: hidden rather than display: none for the error text. This keeps the element's place in the DOM, where as display: none removes it completly.

  3. I would suggest adding the novaldiate attribute to the form and then removing it with JS. This will allow you to use the built in browser validation as fallback in case anything goes wrong. You have all the input types nicely sorted so you can enjoy this nice HTML feature!

Nice one and keep up the good work!!

Cheers 👋 Dave

Marked as helpful

0

Dušan Lukić 1,660

@dusanlukic404

Posted

@dwhenson thanks Dave 😀

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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