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

Vue, Pinia, and TailwindCSS

P
fkrunic 310

@fkrunic

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

Community feedback

@Aik-202

Posted

Wow! Nice work, I loved the feature of scanning the card you added, but:

  1. There's an issue with the "Card number"" expiration year" checks, even with the correct input, it keeps showing the error message.
  2. After every 4 numbers for the card number input field you can add an extra line of space.
  3. You can also restrict card name to letters only, card number, expiration date, and CVC to numbers only.
  4. You can use the maxlength attribute in you input fields to restrict the length of the input field.. for example CVC input field will have a maxlength` of 3.

These are my suggestions, great work once again!

Marked as helpful

0

P
fkrunic 310

@fkrunic

Posted

I appreciate the feedback Assurance! I've updated the auto-complete properties of the card input fields so that the entire credit card form can be auto-filled. As for some of the specifics

  1. The years are restricted to '23' through '27', and so are not full four-digit calendar years. This input field didn't have a length restriction, so entering invalid years were definitely possible. I just tested the live version and it seems to work, but if you are still facing issues, please let me know!
  2. Great suggestion! This has been added.
  3. I forgot about restricting the name input to letters only- thank you for flagging this! The validators for the other fields are in src/app.ts; I don't include any type specifications on the input HTML elements because it doesn't actually restrict bad input, and the app handles form submission via Pinia so a JavaScript/TypeScript validation approach seemed better.
  4. I didn't know about this, thank you! Length restrictions have been added to all the input fields.
0

@Aik-202

Posted

@fkrunic ooh that's great! You are welcome, I'm glad I could be of help

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