Responsive interactive card details form

Community feedback

• 

  Jesse Good•120

  @jessegood

  Posted over 2 years ago

  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;.

  10

  Marked as helpful