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.
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
- Mobile View @
375px
- Desktop View @
1440px
- Solution URL: View Solution Code
- Live Site URL: View live site
- Angular (JavaScript framework)
- Sass & CSS custom properties
- Mobile-first workflow
- Semantic HTML5 markup
- Figma
π
- π Deploy
- π add animations
- Move functionality to a service
- π€·π½ββοΈ add date
FormGroup
- π€·π½ββοΈ move confirmation screen functionality to
ConfirmationComponent
- π€·π½ββοΈ formatting for
input
Regex Form Validators
-
ππΎ 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 π .
- Angular 12 - Sharing data between child and parent components with
-
*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 π€.
- Frontend Mentor - @Chanda-Abdul
- Website - Chanda Codes
- GitHub - github.com/Chanda-Abdul