Design comparison
Solution retrospective
Problems
- Error handling
I was using <input type='text'> for my inputs because I was lazy to fiddle with the css for number inputs to remove the arrow buttons. However, I do not know how to validate my input before submitting.
If I had used number inputs, I could have set min and max attributes to validate my input was in range before the submit happens, but I couldn't do the same thing for text inputs.
My crappy workaround was to alert the errors on the submit handler. How do I validate the inputs in this case. Is there an event which checks for valid inputs before the submit?
- Input width
I tried using flexbox to style my input fields, but received a problem. <input> only responded to width: 100% and not max-width: 100% which confused me
And a more general problem, I do not know how to make my inputs fill up the container. In mobile view, even though there is remaining space on the sides of my component, the <input> gets squashed instead of expanding the component to the fullest. Not sure what the general method to handle this is.
Any help is appreciated!
Community feedback
- @josemongedevPosted over 1 year ago
Hi Theo, good job on this assignment 🎉💪. Don't worry about it too much regarding the hindrances you had, you can always retry the challenge and improve your code.
Regarding your question:
- To validate "text" inputs using Javascript, you can use regular expressions to limit the minimum and maximum numbers and set minimum and maximum lengths on the inputs. You can use then the checkValidity, setCustomValidity and reportValidity methods inside javascript to check if the input complies with the previous rules. I'm leaving some links below so you can read them:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/ https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
With frameworks like React there are special libraries like react-hook-form or Formik, that make this easier, but these aren't meant for vanilla JS.
Although you had some issues with the "number" input, you can also use it and it's better for accessibility reasons, giving the browser a hint of what of kind data it's supposed to go in the input box. I added a way in which you can remove the arrows in the following codepen:
https://codepen.io/josemongedev/pen/ZEmxNRv
- Regarding the containers: width defines a specific size for the element while max-width defines the maximum width the element can have, but doesn't set the width size per se. So it bounds the upper limit of the width, but it's free to resize according to the content.
I'd recommend you to review how flexbox works so that you can better understand the concepts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
And maybe also you could study css grid which is a nice alternative for many use cases: https://css-tricks.com/snippets/css/complete-guide-grid/
Also, to understand block, inline and inline-block elements you can visit here: https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/
These are great sources with images and explanations on how they work.
Alright hopefully it was helpful, and have fun reading the sources! Remember it takes time at the start, but once you understand the concepts, the rest of learning it's basically reusing them on other exercises and that's how you learn faster. Super easy! 😉
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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