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

#flex-box #css #javaScript

ayush 300

@ayush111222

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


when i am submiting the form cant hide the form so i used return false so the form cannot get submited so i want the solution for that the form also get submited and it will hide. and i cant give border radius in the focus and tell me about the real time updating and cards css your feedback will be very very appriciated sorry form my English but hope you getted my point thanks please leave me some feedbacks and am also new to javaScript.

Community feedback

P
Mike Oram 230

@SlothSan

Posted

Hey,

Looks great,

You can get the values out from the inputs on the form by using this.

for example for the CVC Number, you can have this event handler on the input cvcInput.addEventListener('input', inputHandlerCVC); that will listen for any inputs in the cvcInput.

you can then have a function similar to this to handle the input and update the text on the card.

const inputHandlerCVC = (event) => { sanitizeInputLength(event.target.value, cvcInput, 3); cvcOnCardBack.innerHTML = event.target.value; }

You will also wan't to probably validate it as its entered so the user cannot enter a CVC that is longer than 3 digits / check that the user hasn't removed the number tag from the input and entered text, that said its not in the spec but the more validation the better !

In reality the validation would be performed on submit to the backend and rejected if it wasn't in the right format.

Marked as helpful

1

ayush 300

@ayush111222

Posted

@SlothSan thanks so much for your help mate.

1

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