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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Update the inputs on the form as the user fills in the fields and see the card details update in real-time
• Validate the form fields when the form is submitted and 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
• If there are no errors, display the completed state
• Reset the form when the user clicks "Continue" on the completed state
• View the optimal layout depending on their device's screen size
• See hover, active, and focus states for interactive elements on the page

Screenshots

• Mobile View @ 375px

• Desktop View @ 1440px

  • Initial Screen with empty form

    

  • Form with Invalid Inputs and Error Messages

    

  • Form with Dynamic Card Logo (Visa, Amex, MasterCard, Discover, or Default)

    

  • Form with Valid Inputs

    

  • Form with Button Hover State

    

  • Completed Form Confirmation Screen

    

Links

• Solution URL: View Solution Code
• Live Site URL: View live site

My process

Built with

• Angular (JavaScript framework)
  • Angular Template Driven Forms
  • TypeScript
  • JavaScript
    • Regular expressions
• Sass & CSS custom properties
  • Mobile-first workflow
• Semantic HTML5 markup
• Figma

What I learned

🔜

Continued development

Soon

• 🔜 Deploy
• 🔜 add animations

Someday

• Move functionality to a service
• 🤷🏽‍♀️ add date FormGroup
• 🤷🏽‍♀️ move confirmation screen functionality to ConfirmationComponent
• 🤷🏽‍♀️ formatting for input Regex Form Validators

Useful resources

• 🙌🏾 Angular - The Complete Guide (2022 Edition) by Maximilian Schwarzmüller - This is an amazing Udemy Course which helped me finally understand Angular Forms. 10/10 would recommend to anyone still learning this concept.

• Introduction to forms in Angular - The Documentation 📜 .

  • Building a template-driven form - The Documentation 📜 .
  • Reactive forms - The Documentation 📜 .

• Event binding - The Documentation 📜 . This was kind of useful.

  • Angular 12 - Sharing data between child and parent components with @Input and @Output decorators. - Quick and easy 🎥 explanation on sharing data in Angular. Very nice.
  • Sharing data between child and parent directives and components - The Documentation 📜 .

• *NgSwitch Directive - The Documentation 📜 . This was actually helpful

• Pattern Validator - The Documentation 📜 .

  • Regex for Leading Card Networks - Stack Overflow 🤓. I enjoyed this and it was helpful.
  • Regular expression for first and last name - Stack Overflow 🤓.

Author

• Frontend Mentor - @Chanda-Abdul
• Website - Chanda Codes
• GitHub - github.com/Chanda-Abdul

Acknowledgments

#Angular #Template-Driven-Form #JavaScript #TypeScript #Validators #RegEx