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! 😉
