Skip to content
Submitted almost 2 years ago

Mobile first solution with Grid and Flexbox

Ahmet Hakan•80
@ahmetwithat
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

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?
Code

Please log in to post a comment

Log in

Community feedback

  • Mikhail Lorenzo Aniel•230
    @lorenzoaniel

    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

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