Interactive Card Details

Community feedback

• 

  Jacob Marshall•270

  @JacobMarshall0Posted about 2 years ago

  You may want to explore the element.eventListener("input", ...) more, as this allows you to update the card details on the display whilst the user enters their details.

  I see you have used it to update the formatting of the cardnumber input, but this could use a little work as it breaks when users remove characters and enter them again. I think this may be down to your if statement if(i % 4 == 0 && i < 16) and how you handle i, as when users use backspaces the eventListener i increments, causing the if statement to incorrectly add spaces, and eventually the entry bypasses the if statement. You could also include maxlength in the <input> to limit the number of characters a user may enter.

  Other than that issue, you've followed the design well and your site looks good on mobile and desktop. Good job.

  Marked as helpful

  1

  ---

  

  Emmanuel Munyite•510

  @munyite001Posted about 2 years ago

  @JacobMarshall0...Yea, this was just the first attempt, so I was just trying stuff out to make it work, but I'll improve on them, Thanks for the feedback

  1