Skip to content
Submitted over 1 year ago

Responsive card details - React - Vite

Roberto Ramirez•1,350
@Robertron624
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

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
    @sulemaan7070Posted over 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.

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

    Happy coding😄👍🏻✅

    Marked as helpful
    1
    Roberto Ramirez•1,350
    @Robertron624Posted over 1 year ago

    @sulemaan7070

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

    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