Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chanda-abdul/angular-interactive-card-details-form-frontend-mentor

This is a solution to the Interactive card details form challenge on Frontend Mentor using Angular
https://github.com/chanda-abdul/angular-interactive-card-details-form-frontend-mentor

angular credit-card-validation forms frontend-mentor javascript regex template-driven-forms validation

Last synced: 2 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# Frontend Mentor - Interactive card details form solution

![Design preview for the Interactive card details form coding challenge](./src/assets/design/desktop-preview.jpg)



This is a solution to the [Interactive card details form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-card-details-form-XpS8cKZDWw). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview



### The challenge



Users should be able to:



- [X] Update the inputs on the form as the user fills in the fields and see the card details update in real-time

- [X] Validate the form fields when the form is submitted and receive error messages when the form is submitted if:

  - [X] Any input field is empty

  - [X] The card number, expiry date, or CVC fields are in the wrong format

- [X] If there are no errors, display the completed state

- [X] Reset the form when the user clicks "Continue" on the completed state

- [X] View the optimal layout depending on their device's screen size

- [X] 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](https://github.com/Chanda-Abdul/Angular-Interactive-Card-Details-Form-Frontend-Mentor)

- Live Site URL: [View live site](https://stalwart-twilight-d769cf.netlify.app/)



## My process



### Built with



- [Angular](https://angular.io/) (JavaScript framework)

  - [Angular Template Driven Forms](https://angular.io/guide/forms)

  - [TypeScript](https://www.typescriptlang.org/)

  - [JavaScript](https://www.javascript.com/)

    - [Regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)

- Sass &  CSS custom properties

  - Mobile-first workflow

- Semantic HTML5 markup

- Figma

##



### What I learned

🔜



##



### Continued development



#### Soon

- [X] 🔜 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](https://www.udemy.com/course/the-complete-guide-to-angular-2)  - This is an amazing [Udemy Course](https://www.udemy.com/) which helped me finally understand Angular Forms. 10/10 would recommend to anyone still learning this concept.



-  [Introduction to forms in Angular](https://angular.io/guide/forms-overview)  - The Documentation 📜 .

  -  [Building a template-driven form](https://angular.io/guide/forms)  -  The Documentation 📜 .

  -  [Reactive forms](https://angular.io/guide/reactive-forms)  -  The Documentation 📜 .



-  [Event binding](https://angular.io/guide/event-binding)  -  The Documentation 📜 . This was kind of useful.

  -  [Angular 12 - Sharing data between child and parent components with `@Input` and `@Output` decorators.](https://youtu.be/qspoPXaF_Aw)  - Quick and easy 🎥 explanation on sharing data in Angular. Very nice.

  -  [Sharing data between child and parent directives and components](https://angular.io/guide/inputs-outputs)  - The Documentation 📜 .



- [`*NgSwitch` Directive](https://angular.io/api/common/NgSwitch)  - The Documentation 📜 . This was actually helpful



- [Pattern Validator](https://angular.io/api/forms/PatternValidator)  - The Documentation 📜 . 

  -  [Regex for Leading Card Networks](https://stackoverflow.com/questions/9315647/regex-credit-card-number-tests)  - Stack Overflow 🤓. I enjoyed this and it was helpful.

  -  [Regular expression for first and last name](https://stackoverflow.com/questions/2385701/regular-expression-for-first-and-last-name)  - Stack Overflow 🤓.

  



## Author



- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)

- Website - [Chanda Codes](https://chandacodes.com/)

- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)

 ## Acknowledgments
















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