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 | ReactJS, SASS, BEM

@DarKaRor

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


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

@noheezybucket

Posted

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

@DarKaRor

Posted

@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

@noheezybucket

Posted

@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

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