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

@sushankpp

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


Sorry for no responsive design, I was too lazy to make it responsive

Community feedback

@ExpertoMontanero

Posted

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

@0xabdulkhaliq

Posted

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

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