Skip to content
Submitted over 2 years ago

Interactive card implemented using Vue and Typescript

#typescript#vue#sass/scss
Katja Danilova•340
@katjadanilova
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

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?

Please log in to post a comment

Log in with GitHub

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