Submitted about 2 years ago

Interactive Card details with React

mrxshinji• 370

@mrxshinji

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive card details form

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Aspect Ratio Div 1 of the Nightmare I have when doing this is to set the aspect ratio properly with vw. Until I realized I was dumb and I could just use padding-bottom with vw. A lot website recommend using padding-bottom with %% but that doesnt work for me since it is not full page and my width is base on view width. So instead, I use vw for padding-bottom as well to maintain its ratio.
Form Validation with React was a mess for me. Will need to learn how to do it properly.

Community feedback

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