@digital-stew
Latest comments
- @sjoseph91
Hey, I like your animations. They are subtle, yet effective. I also learned that about the html autocomplete input attribute from your code. That would have been useful in my app since we don't want our real credit card data going into these apps.
This may be nitpicky, but the month validation still allows you to put dates in the past. I manually put in a regex where the string had to be greater than 22, but if you wanted it to be flexible, you could use the new Date() and getMonth method to find the current month and make your users enter dates after that month.
Thanks for reading and all the best!
Marked as helpful - @fritzadelbertus@sjoseph91
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 - @TomasGeist@sjoseph91
I like how you incorporated an effect for multiple button clicks. I didn't even think about removing the time descriptors.
Marked as helpful
