Mobile first signup form, Parcel bundler, sass, show/hide password

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  hey @santu369 great work on this one!! 🙌 The page looks great and you've done nicely with adding the hidden labels to all those inputs! Here's some small points you might like to consider:

  1. I would make the focus style marker more obvious. I like the subtle design, but they need to clearly show people with poor vision where they are in the DOM. If you only want to show it for keyboard users you can use some code like this:

  :focus-visible {
  	outline: 3px dotted var(--clr-primary-100);
  	outline-offset: 0.25rem;
  }
  
  :focus:not(:focus-visible) {
  	outline: transparent;
  }
  

  2. At the moment the errors are causing a bit of jank in the form when their value is toggled from display: none to display: block. To avoid this you could try setting them as visibility: hidden and then visibility: revert. This will keep the space they take up in the DOM, and hide and show the contents and should avoid the jank.

  3. At the minute, we are getting some validation from the browser and some from your JS, I would suggest adding the novalidate attribute to the form as the first function in your JS, this will stop the browser validation (e.g. on email). We are doing this in JS as if for any reason the JS fails, we can still enjoy the inbuilt browser validation.

  I hope this gives you some good pointers!! Great work here and keep going!! 👍 Cheers '👋

  1

  ---

  

  shiva santosh jana•375

  @santu369Posted over 3 years ago

  @dwhenson Hi Dave, Thanks for the detailed feedback. I have updated the solution and will keep these pointers in mind for future projects.

  0