All solutions

Initially I wanted to avoid React and React Router, so I ended up cobbling together some vanilla JS routing. It worked, at least locally, but did not render anything when viewed on Github pages. I ended up rebuilding it using React.

The non-React attempt is the main branch. Github pages uses the main branch (but doesn't actually display anything) The Netlify site uses the react branch.

This time I wanted to use a data structure to contain each car type. An array method would iterate through them. I attempted to recreate the basic entry point that something like React uses.

I really don't like using absolute positioning and realized that what is going on here might not be a use case foe flexbox in the way I normally use it, but I think the absolute positioning solution works well enough.

Another speed build! VS Code Co-pilot helps! Happy with how this turned out--didn't really need to define media rules this time (though I did anyway, just in case). Not pixel perfect, but that is a dangerous rabbit hole to go down! Minor subjective improvement to the "Cancel Order" button styling.

I tried to go as fast as possible to build this, just as a personal challenengs. I still have some blind spots surrounding the media queries and responsive design, though here it seems to work.

I didn't test this in other browsers, and I didn't implement what appears to be a gradient on the input:active border. I used scale on the card elements in mobile view--is there a better way? I also improved some UX, and changed the font on the card to a monospace font, at least for the numbers. What else can I do to improve this?

I tried to use an img tag with classes mobile and desktop that when combined with media queries would show either (a) the mobile image, or (b) the desktop image, but I was not successful. I was more successful in using CSS' background-image with background-size, such that I really only had to use one image, where the CSS magic would make the same image appear as it does in the images provided by the Challenge. The CSS magic was unintentional, so I'm lucky it worked out. Should I be using img tags, or does my solution (w/ background-image and background-size) work? Is it better to serve only a single image? If not, why not?

I'm thinking that there could be more use of display: flex to achieve the button being aligned with the bottom of the adjacent list?

When wiring this up to the JSON, would it be overkill to use React? I plan to, as it abstracts away a lot of the annoying parts about vanilla JS.

Without a Figma file to reference, how did you determine border-radius, padding, etc.?