Interactive card details form🔥🔥

Community feedback

• 

  Danilo•200

  @OneBitMancePosted almost 2 years ago

  Hello there Mr. Suleman!

  I have taken a look at your solution, and I think that you did an awesome job! However I have noticed some weird collection of stuff was going on in the solution.

  1. I have noticed that not all of the form input fields were the same size, and one was not properly aligned. The 'Expiration Date' and 'CVC' fields were smaller, and 'CVC' was sort of shifted up a bit.

  2. Your cards container seems to be overflowing the form container, and as such - the cards in your container have actually shifted out of the card container. Also, instead of having the background of the card container be an actual <picture> element, you could set a background image on your container, like this:

  Card Container CSS

  background-image: url(images/bg-main-desktop.png);
  background-repeat: no-repeat;
  background-size: 60% 100%; // 60% -> Width of the img, 100% -> Height of the img
  // You can later change these values - and even the background-image later if screen sizes make you do so, using media queries
  

  3. When the screen size drops below 1024px, the whole page kinda breaks. The background of the card container does not stretch out across the screen, the cards info spread out randomly on the screen, and the form is not aligned properly. It only starts looking nicer after it reaches 615px, only this time the form still stays unaligned properly.

  4. As for the form validation, I have noticed that the 'Cardholder Number' input field doesn't detect letters, and even with the letters put in, it triggers the 'Thank You!' visual. The month input field accepts 0, and numbers larger than 12 which it shouldn't, and when you put in letters inside the 'CVC' field, it doesn't display any error.

  For the 'Cardholder Number' you could use a regex such as this one:

  /^[0-9\s]+$/

  • This will match a string which only contains numbers from 0-9 and including whitespaces (\s).

  Overall, I think you have done an amazing job! The tailwind code looks super amazing and impressive, and I like the overall logic of the solution. Keep coding, you are awesome! 😁🤩

  Marked as helpful

  0

  ---

  

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  @OneBitMance thank you for your appreciation!! buddy the really helpful part was the regex..I will implement that

  1