Design comparison
Solution retrospective
- I split the JavaScript variables/error variables into it's own partial. It seemed useful to me. Is there a downside I'm overlooking?
- It bugs me that when the 2px border is applied to the error fields, the form changes ever so slightly in size. I tried using outline instead of border, but I couldn't quite pull it off. I suspect I could have manipulated the padding via JavaScript but I was worried that was overkill. Suggestions?
- How could I improve my JavaScript (syntax/formatting)? Can my code be simplified?
- How can I improve accessibility?
Community feedback
- @DavidMorgadePosted over 2 years ago
Hello Jason, congrats on finishing the challenge, almost pixel perfect, great job!
If you don't mind, I will try to do my best to answer your questions.
-
Perfectly fine if you find your code more readable and organized, in popular frameworks for example, you will have all your code separated in a lot of files wich makes the code a lot more readable if it has a good organization.
-
This is cause because you are adding those two extra pixels that push the other items down, you can get and easy work around with
box-shadow
instead of border, for this particular case try with:box-shadow: 0 0 0 2px rgb(255, 122, 122);
-
Try selecting more things at once and loop at them, for example you could have selected all of your inputs and identify throw id's to use diferent validations on the same function but for diferent inputs, is a bit tricky to refactor, but using
forEach()
can help you a lot to refactor your code and make it more clear. -
I don't see that you are lacking that much on accessibility, you could for example use a
section
on the leftdiv
that is semantically related. Just don't forget to add alt tags to your images and structure well your document, so screen readers can have a better time.
Hope my answers help you, if you have anymore questions don't hesitate to ask!
Marked as helpful1@jaycgreenwaldPosted over 2 years ago@DavidMorgade Thank you, David for the feedback! The box-shadow worked like a charm. I really appreciate the tip. (It was such a little thing, but it bugged me a lot.) Thanks again for all of your input. Cheers!
1 -
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