Skip to content
Submitted almost 2 years ago

My solution for the Interactive Card Detail Form Challenge

Waldo•250
@Waldo3333
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

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

  • Juan Camilo Botero•970
    @jcboteroPosted almost 2 years ago

    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

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