Credit card component with css custom properties and vanilla js

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, congrats on your solution!

  • Unfortunatelly maxlength doesn't work as expected with number inputs. I prefer to use type: text and when I need to call the input to JS I convert it like Number(input). If you wish to keep it as number though in JS you can create a function:

  const maxChar = (el, max) => {
    if (el.value.length > max) {
      el.value = el.value.slice(0, max)
    }
  }
  
  <input
    ...
    type="number"
    onkeypress="maxChar(this, 16)"
    />
  

  Also as for <label> elements, name should match with the input id like:

  <label for="name">cardholder name</label>
  
  <input id="name" />
  

  Other than these not much I'd change. Happy coding :)

  Marked as helpful

  0

  ---

  

  Kamil•120

  @kamilp522Posted about 2 years ago

  Hi, thanks for the feedback! :D I'll probably try to convert text into number by js which now seems so obvious, but hey, thats part of the learning process. Thanks again

  0