Submitted about 2 years ago

Interactive Card Details Form | ReactJS, SASS, BEM

Johandry López•220

@DarKaRor

Preview site View code

This is a solution for...Interactive card details form

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Any feedback is appreciated!

I focused a bit more in the functionality this time around, I'm s till new to React and learning!

I'm not sure if my folder structure is the best, or if I'm sharing the data between components correctly. I'm also not sure if my control of the state is the best, I decided to use an object state due to the high amount of state variables I had to use, I had to create another state for the input validation though because otherwise it would update one single input at a time and delete the result of the others (if they were correct or not)

Community feedback

muhamad•360
@noheezybucketPosted about 2 years ago
Hellooo I checked the result you provided for this challenge.

In my opinion :

You should check the position of the card it's not well centered on the Y-axis.

You should check the responsiveness of the page so it can adapt to all types of screen.

Check the report for your HTML code, seems like you did not used the max-length property the right way.

For the number input you did not limit the number of input to 16 I think it's stopping at 19 numbers.

Except that you did a great work. Good job mate.
Marked as helpful
0
Johandry López•220
@DarKaRorPosted about 2 years ago
@noheezybucket

I was wondering why the max-length wasn't working! I ended up just making the max-length functionality in JS since I didn't want to just put max=99 or something like that

For the numbers I decided to let the user input the spaces (if they choose to) and then let the validation and sanitization do the rest, if you try submitting the form with more or less than 16 numbers it wouldn't let you (Though I just notice it would let you input a bunch of spaces and at least one number)

Thanks for the feedback!
0
muhamad•360
@noheezybucketPosted about 2 years ago
@DarKaRor okay I got it but don't you think it would be better if you've putted the spaces automatically ?
0

Please log in to post a comment

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