Skip to content
Submitted almost 2 years ago

Interactive Card Details Form

Rachel Johnson•510
@rachelktyjohnson
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Wow, this one was really challenging! I really enjoyed writing the Javascript that validated the fields and tried to make 1 function that would fit all. I think I should've created something that could be reused on form submit, but I think I managed to MacGyver it relatively painlessly. It could be a bit more DRY but I certainly did my best!

Community feedback

  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted almost 2 years ago

    Hi Rachel! Nice work! It's definitely not easy!

    You could use Constraint Validation API to validate, which combine native html attributes and javascript. Please take a look at my solution using it for the details.

    I hope it helps! Cheers!

    Marked as helpful
    0
    Rachel Johnson•510
    @rachelktyjohnsonPosted almost 2 years ago

    @fazzaamiarso Thanks for that! I definitely didn't think of the Constraint Validation API (didn't know it was a thing haha). I will definitely take that into consideration next time I have a project that involves form validation.

    Thanks again!

    0

Please log in to post a comment

Log in with GitHub

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