Submitted 10 months ago

Practice-16

Svitlana Suslenkova• 3,450

@SvitlanaSuslenkova

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive card details form

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Will be glad to receive any advice on my js code.

Max length for inputs was a problem and I'm not sure if I did it right.
To add spaces into input card number was difficult and I don't like the way I did it. I saw there is a mask fo this, but it didn't work in any way possible.
Used Luhns validation: Valid numbers examples: 4444 4444 4444 4444 4 4444 4444 4444 4448 5555 5555 5555 5557

Community feedback

Denzel NIi Armah Ashitey• 150

@DennyIsNaive

Posted 10 months ago

I don't know if you forgot or you didn't see it but there is a completion page after clicking on the confirm button. Does not work or has not been included.

Svitlana Suslenkova• 3,450

@SvitlanaSuslenkova

Posted 10 months ago

@DennyIsNaive what browser do you use? It works on Edge and Yandex well and code is simple...

Denzel NIi Armah Ashitey• 150

@DennyIsNaive

Posted 10 months ago

@SvitlanaSuslenkova I see, it could be browser issues. I use Mozilla. I will try with Edge and see if there is a problem somewhere with browser compatibility. Thanks for notifying me.

Svitlana Suslenkova• 3,450

@SvitlanaSuslenkova

Posted 10 months ago

@DennyIsNaive I got Mozilla and it works. Can your browser be very old, maybe?

Denzel NIi Armah Ashitey• 150

@DennyIsNaive

Posted 10 months ago

@SvitlanaSuslenkova It seems to be working in my Opera browser but not my Mozilla. I don't have Chrome. I think it is a problem on my side since it works in Opera.

Svitlana Suslenkova• 3,450

@SvitlanaSuslenkova

Posted 10 months ago

Valid numbers examples:

4444 4444 4444 4444 4
4444 4444 4444 4448
5555 5555 5555 5557

Please log in to post a comment

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