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

@munyite001

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


Feedback is always appreciated :)

Community feedback

@JacobMarshall0

Posted

You may want to explore the element.eventListener("input", ...) more, as this allows you to update the card details on the display whilst the user enters their details.

I see you have used it to update the formatting of the cardnumber input, but this could use a little work as it breaks when users remove characters and enter them again. I think this may be down to your if statement if(i % 4 == 0 && i < 16) and how you handle i, as when users use backspaces the eventListener i increments, causing the if statement to incorrectly add spaces, and eventually the entry bypasses the if statement. You could also include maxlength in the <input> to limit the number of characters a user may enter.

Other than that issue, you've followed the design well and your site looks good on mobile and desktop. Good job.

Marked as helpful

1

@munyite001

Posted

@JacobMarshall0...Yea, this was just the first attempt, so I was just trying stuff out to make it work, but I'll improve on them, Thanks for the feedback

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