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

@NitinChaudhary007

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

P

@Minamakhlouf

Posted

Hey Nitin,

This is a fantastic project and your form validation is excellent but there is a problem that happens when the user presses non-letter buttons in the name input field.

For example, if I click on Shift-M to capitalize the letter M, it will write "ShiftM" on the card itself. You might want to limit the acceptable values to the letters A-Z and also accept spaces.

To do this, I suggest you learn about regular expressions so you can limit what is acceptable. If you just use the keydown Event Listener, it will just accept whatever value the user types on the input field and that can cause problems.

I suggest these resources:

  • https://regexr.com/
  • https://www.youtube.com/watch?v=rhzKDrUiJVk&t=561s
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

If you're not interested in regular expressions, I at least suggest putting some limitations on the acceptable keydown values

Hope this helps.

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