Skip to content
OverviewSolutions
7
Comments
3
Sean
@sjoseph91

All comments

  • Sean•150
    @sjoseph91Posted about 2 years ago

    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
    0
  • Fritz•300
    @fritzadelbertusSubmitted about 2 years ago

    Hello, Frontend Mentor community. This is my solution for the Interactive Card Details Form challenge

    This challenge is my first attempt in tackling junior difficulty challenge. Some question I would want to know from the community are:

    • How do you position your card and card elements? I used absolute positioning for the card's texts which I'm not really comfortable using because of the responsiveness.
    • How do you create your real-time display? I haven't applied the DRY concept in this challenge and I feel there is a simpler and cleaner code/function to edit real-time.
    • How do you create your input validation? I used a lot of conditional statements and I am wondering if there is a cleaner solution for this validation.

    Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

    Interactive Card Details Form using Basic CSS and Vanilla JavaScript

    1
    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
  • Sean•150
    @sjoseph91Posted about 2 years ago

    I like how you incorporated an effect for multiple button clicks. I didn't even think about removing the time descriptors.

    Marked as helpful
    1