Skip to content
Submitted over 1 year ago

Interactive-Card-Details-Form-Main

Kamal Osama•420
@KamalAborida
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I am not sure if the way that I made the complete state visible is the right way (best practice) or not. but, beside that everything was good

Community feedback

  • S MD suleman•3,530
    @sulemaan7070Posted over 1 year ago

    hey Kamal Osama😄, I have visited your site and here are a few tips to improve your site..

    1.on the desktop version: I suggest you to increase the size of input fields along with the size of cards..

    2.give the input fields a little more border-radius...

    3.limit the number of characters to 2 in the MM and YY fields and 3 in the case of CVC.

    1. Limit the number of characters to be accepted as input to 16 in case of card number

    bonus

    I recommend you to add the regex to convert this card number 1234567812345678 to this 1234 5678 1234 5678

    Everything else looks great !! happy coding😄

    1
    Kamal Osama•420
    @KamalAboridaPosted over 1 year ago

    @sulemaan7070 thank you so much for those tips.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord