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

Esteban 220

@EstebanPechuan

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

Community feedback

AntoineC 1,180

@AntoineC-dev

Posted

Hi Esteban. Congratulations on completing this challenge.

I've looked at your solution and i would like to suggest some quick improvement you could add to your code.

1- The HTML input element has a property maxlength you could add. For example it could be 16 for the card number, 2 for the month/year and 3 for the CVC. You would still need to check it when processing the data in your JavaScript but this is a better user experience in my opinion.

2- You could use the CSS clamp property to make sure the card number is responsive on the front card because right now it looks really small above 1080px device width. This awesome site - Utopia will help you find the right scale for your project.

Have a nice day/night and happy coding. Peace :)

Marked as helpful

0

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