Responsive solution using Vite, Typescript, React hook form & tailwind

Community feedback

• 

  Shayne Geilman•160

  @ShayneJGPosted about 1 year ago

  Good job Bisola :),

  A couple things to investigate:

  The background and the cards responsively shrink differently. It could be worth making the cards reposition in a manner similar to the background, i.e., as the screen gets smaller, the cards move over as the purple area shrinks to maintain the aesthetic. It also does not maintain the same design at 1440p, which could be worth addressing :).

  If you look at the DevTools of your chosen browser, you may see that you have some duplicate IDs that need addressing as well for the form to function effectively. Duplicate IDs will block the autofill from completing correctly.

  Marked as helpful

  1

  ---

  

  Bisola Onaolapo•160

  @bisoladevPosted about 1 year ago

  @ShayneJG Thank you so much for the suggestions..I will take into account everything and make improvements!

  1
• 

  Adedeji Joyce Eniola•40

  @joycejennyPosted about 1 year ago

  Hi Bisola, just saw your submission on the feed. Your solution is really nice and well built. So i previewed your site solution and tried entering values into the text-boxes. I made sure to enter the correct values/data-types but the "year of expiry" keeps showing me "Enter A Valid Year." I believe this is a bug in your code and just thought i'd bring this to your attention.

  Have a good day and a lot fun coding!!!

  Marked as helpful

  1

  ---

  

  Bisola Onaolapo•160

  @bisoladevPosted about 1 year ago

  @joycejenny Hi thank you so much for your feedback...it wasn't actually a bug as I believe an actual debit or credit card has an expiry date of not more than 5 years or so I think or so I just gave a restriction that users cannot enter cards before 2010 or after 2030 to give enough padding

  1