Frontend Mentor – Interactive card details form solution

This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Note: Delete this note and update the table of contents based on what sections you keep.


The challenge

Users should be able to:

  • Fill in the form and see the card details update in real-time
  • Receive error messages when the form is submitted if:
    • Any input field is empty
    • The card number, expiry date, or CVC fields are in the wrong format
  • View the optimal layout depending on their device’s screen size
  • See hover, active, and focus states for interactive elements on the page


screenshot screenshot on mobile


My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • VueJS (Vue3)
  • Vuelidate

What I learned

I learned a bunch on re-usable Vue components. Validation (with Vuelidate) and using the Vue3 reactive API as a reactive Store.



shout-out to @CharmaineHYM for allowing me to push her on her web-dev journey. Teaching/Mentoring others makes us better! Check her profile out on codepen or


View Github