Responsive interactive card details form

Hi Kaan

Nice solution! Here is some feedback, I hope it helps:

1. It appears you did all the validation by yourself, but I would highly recommend looking into the validation API built-in to browsers. Basically let the browser do the checking for you! For example, to check for empty input, you can do something like the following:

   • Add the required attribute to your input like this: <input required ... >
   • In Javascript, you can check the input like this:

   var validity = input.validity;
   if (validity.valueMissing) // Do something
   

   • I recommend reading this article about it. Let me know if you have any questions.

2. Concerning responsiveness. I see a media query for max-width: 372px and then the next one is min-width: 500px so anything in between that is not accounted for. As a quick test, try resizing your browser and see how the layout changes. Also, I would recommend setting a min-width on the cards so they do not become too small.

3. Try setting the card number to all 1s like this: 1111 1111 1111 1111. You will see that the width is off. To fix this set the following css property font-variant-numeric: tabular-nums;.