interactive-card-details-form

Community feedback

• 

  Tomasz Zawadzki•340

  @ExpertoMontaneroPosted over 1 year ago

  Hello, looking at your solution I see that the site is completely not responsive. To deal with responsiveness you should use scaling values like %, vh,vw or media querries.

  Another problem is no error handling on your site, there is no problem in sumbiting blank form or with inappropriate values like letter cvc code or 132124312 month. You can do error handling by creating some conditions for every cell of a form in java script.

  What is more cards on the left should be interactive. That means that everything you input in form should be immediately displayed on the cards.

  I think there is no sense in slider input in card number too, y

  After submiting a form there is a problem with cards display.

  If you want some suggestions how to improve your code to be much more like the design you can look at my code to this challenge.

  Hope that I helped. Have fun coding :>

  https://github.com/ExpertoMontanero/Interactive-card-details-form-FM

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  COMPONENT MEASUREMENTS 📐:

  • Use min-height: 100vh for main instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens.

  ---

  • For example; if we set height: 100vh then the main will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

  ---

  • But if we set min-height: 100vh then the main will start at 100vh, if the content pushes the main beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0