Skip to content
OverviewSolutions
8
Comments
2
Grooby
@TheGroobi

All comments

  • DrainGK•350
    @DrainGKSubmitted 10 months ago

    Angular Interactive Credit Card

    The Challenge: The objective is to create an interactive credit card detail form. The information entered in the form should be updated and displayed on the credit card in real-time. Additionally, the form should effectively handle errors when the inputs are in an incorrect format

    How I have done it: For this challenge, I've chosen to use Angular and Angular Material. The decision is straightforward: I need to enhance my Angular skills for work. My initial expertise lies in ReactJS and NextJS, but recent projects have been utilizing Angular.

    As a result, the approach I'm taking is slightly different.

    I had to carefully consider which components to use, as well as the services that could be implemented within them. The overall structure in Angular differs from that in React, necessitating a more thoughtful planning process

    In this project, surprisingly, there isn't a direct use of services for two-way data binding. Initially, I considered using the directive [(ngModel)] or passing props from the inputs to the cards. However, I soon realized that the components are siblings, not parent-child, which was a new insight for me.

    Consequently, I should have used a third party, in this case, a 'shared' service, to facilitate information sharing between the card components. This approach reminded me of a similar implementation I had done in ReactJS using the Zustand store.

    The rest of the functions involve logical aspects that require practice and research through resources like Stack Overflow, YouTube, ChatGPT, and Copilot. Identifying problems and knowing what to do comes with years of experience, which I am actively working on.

    The second challenge involved Angular Material, and I'm learning new things about it every day. The reason for choosing Angular Material is the same as for Angular—it's what I'm using at work, and I need to become proficient with it.

    One significant hurdle was error handling, which took days to resolve. I tried several solutions, but encountered a persistent issue: the card number input was not validating correctly. The issue was not with the format—the 4 digits were correct, there were no alphabetic characters, and space handling seemed fine. Eventually, I realized the problem was the spaces. In the form control, I initially used a regex for 'numbers only', which didn't allow spaces. The solution was to switch to a previously created 'cardNumberValidator' which addressed this issue.

    Interactive credit card form [Angular/Angular Material]

    1
    Grooby•90
    @TheGroobiPosted 10 months ago

    Some quick issues i found in your code:

    • Your month and year values are not limited to two digits which breaks the design when you put in a higher value

    • Your year value accepts expired invalid cards

    You could put a minlength/maxlength values on month year and cvc which eliminates the need for error if statement checking the regex at all

    On the year input you could do something like this for checking the expiration of the card

    let thisYear = new Date().getFullYear();
thisYear = thisYear.toString().slice(2, 4);
if (input.value < thisYear) {
    //your error statement here
};

    i personally also included maxing the value at thisYear + 20;

    On another note i really like the animations you did with inputs

    0
  • Grooby•90
    @TheGroobiPosted 11 months ago

    Your missing some margins on the bottom and on the learning text, and a border-radius on the graphic. Also the left margin on the whole thing is uneven. If you put all of the elements inside a container div it's way easier to control the margin. You could put the container width to the same as the graphic and add a padding with white background for it to have an even white border on all sides :)

    0