Credit card component with css custom properties and vanilla js

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 :)