Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive card details form

elasri21 1,390

@elasri21

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I still be challenged by positioning elements, But i do enjoy coding this, The js part still need a lot of work so, stay tuned for the next version of the project Happy coding guys!

Community feedback

Warren 630

@warrenlee

Posted

Hey @elasri21 agreed that doing the layout was a challenge. I checked out your code and seems like you're going to use vanilla JS. You could continue as you are but you're going to have a lot of messy and repetitive code when it comes to handling the form because you'll need to add an event listener to each field, handle the error states like when you should hide them or show them and prior to error states, implementing the validations.

You could try this library for your approach https://validatejs.org/ But I would recommend if you know them to either use Vue/React JS framework.

Feel free to check out my solution if you need some inspiration/tips!

Marked as helpful

0

elasri21 1,390

@elasri21

Posted

@warrenlee Thanks man! I like to use vanilla js. And i will check your solution and of course i'll learn something new.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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