Interactive card details form

Community feedback

• 

  P

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595Posted about 1 year ago

  Hi, @mslysz

  I have got a few points for you to improve in your solutions.

  • I think your design has got an unnecessary margin: 100px auto in your media query. I don't know why you keep it but you should remove that margin so that your design keeps the whole screen width & height.
  • Also, on the same media query you've set a width & height of height: 903px; width: 1440px;. You can keep the width: 100%/auto so it covers full-screen width and for the height, you can give height: 100vh for full-screen height. Try to avoid giving a static width or height to the elements, especially for the body or your main container.
  • When I try to submit an empty form it just shows me an error message for the first field, and if I fill this and submit it again it shows an error message for the next field. Instead, you should show error messages for all the fields on submit for a better UI/UX experience for the users. And when the user changes the input you can hide them again.
  • For the HTML part start using Semantic elements like <header>, <main>, <section>, <aside>, <footer> and more with HTML accessibility rules.
  • For the CVC input field, you should have used type="password" as CVC is a secure key/password of any card, which the user doesn't want to show to anyone. If you want you can also give an eye icon or something by which the user can switch the input type to text or vice-versa, but it depends on the use case if someone wants this kind of functionality. Mostly we avoid it.

  I hope these points will help you. If you have any other query or doubt you can reach out to me anytime. Although, the design is looking nice. Keep mentoring :)

  Marked as helpful

  1