All solutions

Had to add some dynamically adding of the classes in JS to reproduce my current hover / onclick class colors. the :hover :active css pseudo-classes were not enough to meet my needs. Besides that, basic form submission to launch thank you page

1. Trouble figuring out css for input[type=range]
2. Currently no mobile implementation (will be done soon), wanted to see what best practice is for changing to mobile layout. I find things easier to do in JS rather than media query, is that fine? And if I use JS to tweak the HTML layout for mobile is that also alright, or should I build a larger DOM tree, but make it so that I don't have to tweak the structure, just the classes

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

Hi there, my first submission so not too sure what to expect. If there's anything I'd like feedback / comments on, is the way I'm using media query. Currently for mobile, I just set the width to a smaller width so my components don't overflow, but is there any way we can just have one css class for both layouts? And is my image fitting into the container suitable, I couldn't find a way to get object-fit to work. Gonna browse through solutions myself, and have a look at what everyone's done