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

CSS and Javascript

P
Justin Green 2,750

@jgreen721

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


Good practice with some page arrangement and input validations. Wouldn't exactly put this into production but felt I covered a fair amount of bad-input error handling. Would like to implement some logic that would make the credit-card number input box space appropriately. Suggestions welcomed!

Community feedback

@ms097530

Posted

What I did for handling spacing of the credit card number was add an event listener for 'input' where I removed spaces from the current input value and added spaces back in at appropriate locations. Since the 'input' event fires on deletion (single or multiple) and copy-paste it also formats appropriately at those times. Please feel free to check out my submission if you'd like to check it out - I think it worked pretty well. I've added comments for clarity, but if you decide to check it out and have questions please feel free to ask.

Cheers, Mike

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