Submitted about 1 year ago

Responsive card details - React - Vite

#react#vite

Roberto Ramirez• 1,280

@Robertron624

Preview site View code

This is a solution for...

Interactive card details form

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project?

Properly positioning both the cards and its internal dynamic text. It was really hard finding the proper way to position them in the position the design wanted to be

Community feedback

S MD suleman• 3,530

@sulemaan7070

Posted about 1 year ago

hey Roberto Ramirez😄, great job completing this challenge!! and yes this one should be intermediate level if we consider the form validation and CSS positioning... I have a suggestion for you

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

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 number 1234567812345678 to this 1234 5678 1234 5678

Happy coding😄👍🏻✅

Marked as helpful

Roberto Ramirez• 1,280

@Robertron624

Posted about 1 year ago

@sulemaan7070

Thank you so much for your feedback! I'll work in those suggestions.

Please log in to post a comment

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