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

My solution for the Interactive Card Detail Form Challenge

Waldo 250

@Waldo3333

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


Quick a difficult challenge for my 2 months experiences in coding but i'm quit satisfied with the result, let me know where i can improve my code, i know my JS will hurt your eyes ;) !

May the methods i used to get the input.value is not the most efficient, i didn't have any knowledge on what type of EventListener i should use..

Also let me know if the JS part for the ErrorMessages like "can't be blank" is efficient or can be improved, I feel like repeating a lot of code...

Thanks

Community feedback

@jcbotero

Posted

Hello Waldo! Good solution. I have something to add if you don't mind:

Inside the input tag, where you know the user should not type more than a specified number of characters, you can use the max-length property. So, in the "CVC" entry add:

     <input maxlength="4">

In this way, the user cannot type more than 3 numbers. You can apply this to the other inputs, where necessary.

If you think this helped you, please mark it as helpful. Thank you!

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