Here the challenge was to implement a credit card form. Depending on the first digit of the credit card number, an different credit card image would be displayed. The challenge also called for the implementation of a CSS animation that would flip the card once the CVV input was in focus. Really all I had to do was conditionally add a class to the card element.

I've actually completed a similar challenge before, albeit on Frontend Mentor.

The challenge came with the CSS pre-written, so I focused on the JavaScript. I added additional functionality to the form, such that the form can't be submitted at all if some of the inputs were empty. I also added a live preview of the card number, card holder name, signature, expiration date, and CVV.

Though the challenge doesn't call for it, I intend to implement the Lunh algorithm to validate the credit card number.