Musab Mohammed• 190
@Mus3b3bdo
Submitted
I'm looking for easier way for form validation in react (more efficient)
ABHAY GAUTAM KAMBLE
@abhay8696
All comments
- ABHAY GAUTAM KAMBLE• 340
@abhay8696
Posted
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 - Jacob Seymour• 50
@Jacwilalasey
Submitted
Thanks for checking me out!
One issue I didn't figure out, how do I get the QR code img to resize with the rest of the card component when sizing down to mobile?
Thanks, Jac
ABHAY GAUTAM KAMBLE• 340@abhay8696
Posted
Hey @Jacwilalasey, You need only one div in body element. And to keep that div in center of page, use flexbox as shown below: body{ height: 100vh; display: flex; align-items: center; justify-content: center; } This will keep your content in center always. And for the image size issue, keep its max-width to 100%.
Hope this helps, thank you.
Marked as helpful
1 - Odalloc• 170
@Odalloc
Submitted
I use the absolute position on each column's button so they will always stay equal at the bottom. Is it alright? Or is there a much better approach to this? Any suggestions will be helpful, thanks!
ABHAY GAUTAM KAMBLE• 340@abhay8696
Posted
Hey @Odalloc, great work you have did here. I've used flexbox to give proper spacing to the contents of the cards. Here's what I did to card div: display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly;
You can also add "role = 'main' " attribute in section element to resolve accessibility issue.
Marked as helpful
1
