Interactive Card Detail Form using TailwindCSS3 Framework

Community feedback

• 

  Denis•1,060

  @Mod8124Posted about 2 years ago

  Hello Well done!

  Mmm, I think there are many ways to do that I'm going to show two ways, you choose whatever you want it.

  Html(example)

   <input type="text" name="card" id="inputCard">
  

  • First way

  //First, select the input a saved it in a variable
  const inputCard = document.querySelector('#inputCard')
  
  //Then create a function that watches the input value
  const handleSpace = event => {
      if (event.target.value.length === 4 || 
          event.target.value.length === 9 ||
          event.target.value.length === 14) {
                  event.target.value += ' '
              } 
   }
  // It's simple if the value.length === 4 || value.length === 9 (every four number), the function add space to input value 
  
  //Add event `input` to the input (this is an event that sees every change of the input)
   inputCard.addEventListener('input', handleSpace)
  

  • Second way

  //First, select the input a saved it in a variable
  const inputCard = document.querySelector('#inputCard')
  
  // Create a variable count, start from zero and add one until 4, if the count is equal to zero, the function adds space to the input value 
  
   let count = 0;
  
  //Create a function that sees if count === 4, if equal add space and restart the count to zero
     const handleSpace = (event) => {
          if (count === 4) {
              event.target.value += ' ';
              count = 0;
          }
          count +=1 
         }  
  
  //Add event `input` to the input (this is an event that sees every change of the input)
   `inputCard.addEventListener('input', handleSpace)`
  

  I hope it helps you, Good coding 🙌

  1

  ---

  

  Muhammad Naufal Farras•270

  @naufalf25Posted about 2 years ago

  @Mod8124 Thanks for your suggestions. But, I get error when using event. So, I write a new code follow my old index.js

  let inputNumberCard = document.getElementById('cardNumber');
  
  inputNumberCard.addEventListener('input', () => {
          if (inputNumberCard.value.length === 4 || inputNumberCard.value.length === 10 || inputNumberCard.value.length === 16) {
              inputNumberCard.value += '  ';
          }
      });
  

  Follow your suggestions, my code just work perfectly. Thanks mate, without your suggestions maybe this project will have input number without space like general credit card format 👏🙌

  0
• 

  Mukwende•1,370

  @mukwende2000Posted about 2 years ago

  There is no built in way of putting spaces after four numbers so you just need to come up with your own logic. If I get time I will try to come up with a solution and send to you.

  1

  ---

  

  Muhammad Naufal Farras•270

  @naufalf25Posted about 2 years ago

  @mukwende2000 No problem, I just get solutions from above comment. Thanks for your responses 🙌

  0