Skip to content
Submitted over 2 years ago

Interactive Card Details Form with React, Formik and Yup

react
Catalin Banici•260
@CatalinBanici
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello!

Please leave a feedback, what can I improve?

I tried making a minimum of digits required for each number input with the .min() yup method, but it didn't work out very well, it was a bit buggy, if you know a better solution please let me know.

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • yishak abrham•2,150
    @yishak621

    By the way i have a question ...how did u manage the card number space after 4 digits each time ...i couldn't figure out how to do that

  • yishak abrham•2,150
    @yishak621

    Why don't u use maxlength attribute in the input

                    <label for="cvc">cvc</label> 
                 <input 
                   id="input-cvc" 
                   type="tel" 
                   placeholder="e.g 123" 
                   required="required" 
                   maxlength="3" 
                 />

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord