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

Mobile first solution with Grid and Flexbox

@ahmetwithat

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


A couple of questions:

  • The way I tried to make the font-size of the display cards seemed really off. Are there any better ways to do that?
  • Was my solution accessible enough?
  • Are there any "best practices" you would suggest?
  • Is my js code clean and readable?
  • Is it optimal to handle events with a for loop?

Community feedback

P

@lorenzoaniel

Posted

Gj on the styling Ahmet,

  • Great effort on the validation, noticed there is an issue with date validations where i can put 99 99 999 and it would still accept the credit card. If you need help with this refer to my solution for age calculator check under: age_calculator_app/src/lib/isValidDate.ts result returns booleans(true/false) for day/mm/year in object form

  • easier way to do form validations would be to include a validation library here are some: Yup/Zod, these libraries work by having the required attributes (card number, email password etc.) and describing how they should be validated in a json object or commonly referred to in this case as a 'schema'.

Good luck on your development journey

1

@ahmetwithat

Posted

@lorenzoaniel I honestly thought that the actual validation beyond the regex and length would be handled by the server and APIs maybe, and also wanted to practice my DOM skills by doing the basic validation on my own. But you are right, It's a better idea to let the validation to be done by libraries. Thanks for the comment!

0

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