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 implemented using Vue and Typescript

@katjadanilova

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


A small and interesting project to work on, and I decided to implement it using Vue. I incorporated additional form validation and made several UI adjustments, such as ensuring the bank card size was proportionate and adding a shake effect to the button. What was your solution for adding spaces in the card number field?

Community feedback

S MD suleman 3,530

@sulemaan7070

Posted

hey Katja Danilova😄, congratulations on completing the challenge here are a few tips to make your site better..

1.I see that you have used the body->flex but that property is causing extra space(margin) on the left and right sides...

2.The validation seems very nice..The only thing which seemed like a bug is when I am entering the ii into the YY input field...there was no validation error..

I really liked the button shaking-animation upon entering the wrong input great job, happy coding👍🏻🔥💯

Marked as helpful

0

@katjadanilova

Posted

@sulemaan7070 thanks for your comments, and a good catch there about validation of exp.dates and CVC - indeed, I didn't check if user inputs numbers there. Body having display: flex does not cause margins, it's just that body has justify-content: center so that even on big screens content is located in the center.

1

@katjadanilova

Posted

Do you have any ideas why do I get an error "Attribute modelvalue not allowed on element div at this point." in HTML validation report?

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