The application is very simple, is about filling a credit card info which reflects each value into a credit card layout as shown below.
- What to do?
- Re-create it similar, be careful with the details (the little animations).
- Layout the whole form from scratch, it means, you should create your own form components what satisfy the functionality shown above.
- How to do it?
- You can use whatever you want (Vanilla CSS, Sass/Scss, JSS, etc.) Make it easy and comfortable for you.
- Use a methodology to name your classnames.
- What to do?
- While the user is typing the card info, change it in the card layout.
- Stand out ( in the card layout ) the info that the user is typing.
- Detect the the financial entity with the first digits of the card number, in this case detect VISA ( 4*** ), MASTERCARD ( [ 51 | 52 | 53 | 54 | 55 ] ** ) and AMEX ( 3*** ).
- How to do it?
- Use React, typescript and some state manager.
- Make it like components, we are also checking the file structure.
A good programmer always tests his code, so give it a chance to test your components.