Interactive Card Details Form using Basic CSS and Vanilla JavaScript

Community feedback

• 

  Sean•150

  @sjoseph91Posted about 2 years ago

  Hey Fritz, I used absolute positioning for the info inside of the cards, although I did have to adjust them on larger screens. For the cards themselves, I positioned them relative to the bottom side of their container div on mobile screens and the right side of that div on larger screens. In the context of your code, I think that would be on <div class="card-display">

  For real time display, I used React. In vanilla JS, the only thing I can think of is doing something similar to what you did, adding an event listener on the various input elements and updating the corresponding .innerText of .textContent proprety.

  I put all my form validation in one function, although I could have broken it up. I used regex to validate all inputs in JS and I set the maxLength property on the HTML input tags. I had if statements check to see if the following conditions failed, and if they did, I would that input element's error message.

  Credit card number: (!/^\d{16}$/.test(number)) // I formatted the string by adding spaces when displaying it. Month: (!/^(0[1-9]|1[0-2])$/.test(month)) Year: (!/^(2[2-9])|([3-9]\d)$/.test(year)) // accepts values greater than 22 CVC (!/^\d{3}$/.test(cvc))

  Hopefully that helps! Good luck on your journey

  Marked as helpful

  0

  ---

  

  Fritz•300

  @fritzadelbertusPosted about 2 years ago

  @sjoseph91 Thank you for sharing your solution!, I also wanted to start using React after this challenge and hoping I can use it for the next challenge.

  0