Interactive card details form solution

Community feedback

• 

  Avinash Dhauni•170

  @avinashdhauniPosted over 2 years ago

  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

  ---

  

  Daniel Hernández•680

  @MarcosRubiPosted over 2 years ago

  @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

  @ReddsitoPosted over 2 years ago

  @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

  

  Daniel Hernández•680

  @MarcosRubiPosted over 2 years ago

  @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

  @ReddsitoPosted over 2 years ago

  @MarcosRubi Oh listo, gracias

  0