Interactive card details form with js vanilla and flexbox

Community feedback

• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted over 2 years ago

  Hey there,

  Great job, taking on this challenge. This challenge also did give me a tough time before finalizing the code.

  I found some little problems with the live solution you've written so far. firstly, you didn't space out the chunks of input in the input box of the card number. so instead of: 1234567890should be 1234 5678 910.... ( I hope you get the whole gist here).

  Also before submitting the form, I'll recommend actually validating the form to check to see if all inputs are filled and valid as well. That would be better.

  I think that's all I can point out for now. well for the spacing out of numbers into 4 chunks of chars. This is a little trick I used, hopefully, it works for you as well.

  // using this with the change addEventListener method for inputs
  const formatInput = (value) => {
    if(!value) return value;
    return `${value.slice(0, 4)} ${value.slice(4, 8)} ${value.slice(8, 12)} ${value.slice(12, 16)}`;
  }
  
  const answer = formatInput('1234567890123456');
  console.log(answer);
  
  

  you can use the above function I wrote and test it out and see if it works. But to integrate it with your code, you'll need to use the 'change' event listener. What I mean by this is:

  input.addEventListener('change', () => {})

  0