Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive-Card-Details-Form-Main

#sass/scss

@KamalAborida

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@sulemaan7070

Posted

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

@KamalAborida

Posted

@sulemaan7070 thank you so much for those tips.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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