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

@Yunuscinar41

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


** What I added extra from requested **

  • A credit card icon
  • Set transition for confirm button and credit card icon.

Any feedback is welcome :)

Community feedback

Miran Legin• 620

@miranlegin

Posted

Hi Yunus,

regarding input fields you can do some improvements

  1. use appropriate input types for form fields MDN documentation on Input Types especially for mobile users because keyboard is different for every input type
  2. for numbers you can go with both input type="number" or input type="tel", there are couple of differences though so you can explore more on the link
  3. also there is a way to limit number of characters in form fields with maxlength atribute; for example maxlength="2"
  4. for MM field you know the minimum and maximum values accepted so you can add min or max attributes aswell
  5. another attribute worth considering is pattern where you can specify accepted values as a regex pattern; for example pattern=="[0-9]{1,2}"

Before: <input type="text" class="form-control" id="month" placeholder="MM" autocomplete="off">

After: <input type="number" maxlength="2" min="1" max="12" pattern=="[0-9]{1,2}" title="Only numbers from 1 to 12" placeholder="MM">

Keep coding!

Marked as helpful

0

@Yunuscinar41

Posted

@miranlegin I searched about the pattern but I only found js ones. Thanks!

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