All solutions

This challenge took me quite A LOT of effort.

A difficulty I ran into was the layout of the form. Particularly, the expiration portion being grouped together. When running the error label the padding of a valid expiration would interfere with the invalid causing the error to be pushed further down. I used a CSS class called 'semi-valid' to mark when a group of inputs is partially valid to fix that particular issue. I am unsure if this is the best way to handle that issue.

Another difficulty was the validation, doing that by hand is very tedious process. I ended up using jQuery Validation Plugin to do the heavy lifting and it did an excellent job.

Finally, formatting the credit card number input to automatically add a whitespace in groups of 4 was tricky. You have to pay attention to the cursor position as you edit the value of the input.

Let me know if the responsiveness is lacking. I went through the debugger on Google Chrome to test out different screen sizes. Any suggestion are welcome!

This challenge was tougher than I expected. Stylizing the radio buttons was interesting. I ended up using 'display: none' to hide the radio buttons themselves and used the labels associated with each button. It actually ended up looking pretty good, but I am not sure if it was the proper way to do it. The rest of the form was pretty straight forward.

The jQuery was used to allow the user to be presented with another card after rating submission. I ended up using the 'hide()' and 'show()' to exchange out the rating and thank you cards. The functions allowed the cards to be animated for a smoother effect. The only odd thing was I needed to add a 'event.preventDefault()' to prevent the submission from redirecting. My understanding is the function is a way of saying "Hey, I got things handled here, no need to do anything". I do wonder if this is a common thing or if there is a better way to handle this odd scenario.

This is my first attempt. I made sure to add rounded corners in correct spots when resizing. The mobile mode does look a bit warped, BUT it does respond to smaller screen sizes. I ended up using 'srcset', which was pretty cool.

The font sizes might be a little off. Let me know if there is anything odd about the CSS, I tried to condense it. Also, just let me know in general what can improve, I am still pretty new at this.

I modified the CSS with some really helpful suggestions and the challenge solution is A LOT better. Thanks!

Centering the card vertically was probably the hardest part. Ended up using a parent 'div' element as a 'flexbox' to center horizontally and vertically. The challenge didn't call for a responsive design, so I wasn't sure if there was supposed to be two solutions one for mobile and one for desktop. I ended up submitting the desktop version. Hopefully, I did't stray too far from what is ideal.

The challenging part was vertically centering the card. I ended up using 'vh' and 'vw' to size the card. I noticed that when I specified height to 100% on card to get to center vertically it didn't work, however, after I had changed from percentage to 'vh' it seemed to work. Other than that I couldn't get it an exact match with the specified font size on the paragraph element (Ended up making it a bit bigger). I do notice that it does not respond to smaller sizes, but the challenge didn't require a responsive design. Hopefully, the solution I chose is NOT terribly done.