Skip to content
Submitted over 2 years ago

Interactive card implemented using Vue and Typescript

typescript, vue, sass/scss
Katja Danilova•340
@katjadanilova
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code

Please log in to post a comment

Log in

Community feedback

  • S MD suleman•3,510
    @sulemaan7070

    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
  • Katja Danilova•340
    @katjadanilova

    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?

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