Whiskydog / frontendmentor-interactive-card-details-form

Frontend Mentor - Interactive card details form solution

This is a solution to the Interactive card details form challenge on Frontend Mentor.

Overview

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

Links

• Solution URL: GitHub repository
• Live Site URL: GitHub Pages site

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• Flexbox
• CSS Modules
• Vite - Fast development environment
• React - JS library
• react-hook-form - Extensible form library

What I learned

I learned how to use react-hook-form for building forms and provide easy validation.

Also utilized CSS Modules to the best of my abilities for encapsulation of CSS styles. Although please feel free to provide any feedback on my frontendmentor profile, it's my first time using CSS Modules. Vite.js really streamlines this process because it supports Modules out of the box.

I'm still getting a grasp of media queries to implement responsive design.

I was somewhat learned on React.js before this project, however it always amazes me its flexibility. Keeping the card component in sync with the form inputs was fairly straightforward thanks to React.

Useful resources

I always make sure to check documentation:

• react-hook-form API
• CSS Modules docs
• React.js Learn

Also this is an useful series of articles for dipping your toes in CSS Modules:

1. What are CSS Modules and why do we need them?
2. Getting Started with CSS Modules
3. CSS Modules and React

Author

• Website - Whiskydog GitHub Pages site
• Frontend Mentor - @Whiskydog
• Twitter - @whiskydog