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:
- 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;
}
-
At the moment the errors are causing a bit of jank in the form when their value is toggled from
display: none
todisplay: block
. To avoid this you could try setting them asvisibility: hidden
and thenvisibility: revert
. This will keep the space they take up in the DOM, and hide and show the contents and should avoid the jank. -
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 'š
@santu369
Posted
@dwhenson Hi Dave, Thanks for the detailed feedback. I have updated the solution and will keep these pointers in mind for future projects.