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 form solution

@MarcosRubi

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

Community feedback

@avinashdhauni

Posted

Amazing Functionality Bro. You have done amazing work. You are good at Javascript. Hope to connect with you. You have written great Javascript Codes. I didn't know you could build something called Modal in Javascript. I built that functionality using HTML and hiding it. It's a learning experience for me to see your codes. Especially the modal one and the eventListeners. I loved the use of forEach for using Event Listeners. You are amazing dude. Keep it up. I am just a beginner and these codes might be basic, I don't know. But I learnt a lot and that is why I am writing this. Also, I forgot to tell you that I guess you forgot to reset the form because the continue button doesn't work. Other than that everything is amazing.

2

@MarcosRubi

Posted

@avinashdhauni Thank you very much bro!. I am also a beginner but I do my best to finish the challenge. Regarding the modal, what I did was replace the form with the modal div but I hadn't realized that the challenge asked to reset the form so I had to modify the code to add that functionality to the project, thanks for letting me know and sorry If you don't understand me but I don't speak English so use the translator.

1
Reddsito 210

@Reddsito

Posted

@MarcosRubi Hola! ¿me podrías explicar cómo hiciste para dividir en grupo de 4 el input de cardNumber? es que no supe como hacer eso y al final terminé por hacerlo todo unido haha

0

@MarcosRubi

Posted

@Reddsito Hola! Para eso use la librería Cleave.js que formatea los campos de entrada automáticamente, para usarla puedes llamarla por CDN como lo hice yo.

Luego dentro de un script en el index o en un archivo .js por separado le indicas el input y las opciones que tendrá.

HTML:

<input type="text" name="txtCardNumber" id="txtCardNumber" placeholder="e.g. 1234 5678 9123 0000">

JS:

new Cleave("#txtCardNumber", {
  creditCard: true,
});

Seleccione por medio del ID el input donde se ingresa el número de tarjeta y al tener la opción de crediCard en true automáticamente la librería valida que solo se puedan ingresar números y también es quien se encarga de agregar la separación cada 4 dígitos.

0
Reddsito 210

@Reddsito

Posted

@MarcosRubi Oh listo, gracias

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