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

Frimpong04 400

@Frimpong04

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


The card number validation was quite tricky and also the input for the date and month. Feed back is much sought after. Thanks in advance

Community feedback

Jesus 410

@jesusleonel10

Posted

Hello Try to make that when writing in the fields the data is shown in real time in the cards The way I solved it was: 1.- An array with the inputs and another array with the html elements of the card (name, number, ccv etc...) 2.- You go through the array of inputs and use the 'input' event to execute a function when there is a change in the field (i.e. every time you write in the field) 3.- Then the value of that input is shown in the html element of the corresponding card, you can use textContent or innerHtml

I hope I have helped you 😄✌

Marked as helpful

0

Frimpong04 400

@Frimpong04

Posted

@jesusleonel10 Hi, Thank you very much for the feed back. It has helped me.

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