Interactive Card with form Validation

Community feedback

• 

  codezeloss•570

  @codezelossPosted about 2 years ago

  Hey Musab!! I think you tried to apply the same design without having a Figma design file!! Even your design isn't 100% the same, but it's a great work you've given very nice work there. But the interactivity on your solution doesn't exist or work!! Then User infos must display on cards after clicking confirm button...

  NOTE: If you want to center your solution like the original design, add those css lines to your main container, the one on which you put cards & the user form. { height: 100vh; display: flex; justify-content: center; align-items: center; }

  Good luck, wish u all the best!!!

  Marked as helpful

  1

  ---

  

  Musab Mohammed•190

  @Mus3b3bdoPosted about 2 years ago

  Dear @elosscode thanks for your helpful comment I didn't notice that I should Have a card to display user Info upon submit It could easily be added tho so thanks for bringing attention to it

  1
• 

  ABHAY GAUTAM KAMBLE•340

  @abhay8696Posted about 2 years ago

  Hey musab, you've given very nice try up here. It seems you have very good skills in css. For validations, using java-script conditional statements would be a better approach, and also using them with use-state can be useful. Or for simpler approach you can also add 'required' in html element.

  You can use use-state hooks for storing values in form inputs and display them on cards.

  Since we need to maintain aspect ratio of card images , use px (instead of % and rem) for setting width and height. Change these values with different screen sizes.

  Hope this helps. Thank You :)

  Marked as helpful

  1

  ---

  

  Musab Mohammed•190

  @Mus3b3bdoPosted about 2 years ago

  Hello @abhay8696 this was very helpful thank you so much for your contribution yes I could use required attribute in html but I wanted more consistent way yes I think it would be better to use px

  1