Responsive Interactive Credit Card

Hi,

This is very close to being spot on. I often find absolute positioning a little clumsy and not very responsive... but I still use it (I have been searching for an alternative). With this challenge, I set the width of the images (using rem as a unit) and placed them using the breakpoints to fix their position (absolute within the container). The contents such as names and numbers could then be placed in the knowledge that they wouldn't wrap or move around (using flexbox to space them nicely).

With regards to the JavaScript, if it works then all good. As you go along you will find your code improves and you develop a style. The important thing is to understand what you have written and equally as important is that when you pick it up 3 months later you still understand it. It is easy to be clever with code, sometimes too clever for your future self :-). Your code is solid, well-spaced and readable. I would look at whether a variable I refer to once needs to be a variable and not just use the ID. I would also look at some of the validations, note that these can be done in HTML with a CSS pseudo-class of :invalid / :valid to format things. Common pieces of code can be combined and variables passed in. Just look for repeating code, this will come with time.

On the whole, so close, good work and best of luck for more of these challenges.

Hi Laura,

with respect to responsivnes I'd recommend you to give the credit card images (front and backside) a fixed(!) size so that the card-content (number and name) don't breake. If you do want to have it growing and shrinking, then try a min-width of 300px. Thats enough to prevent the number from breaking. Try to get the cards move to the left, if you run out of space on small desktops and/or reduce the whitespace between the form and the cards. In my own solution I gave the cards a position: absolute with left in %. The gap between form and left side also in %. You should better change to mobile-layout bevor you breake the card-number or get a vertical scrollbar or cover the form with the cards (wich may happen with a fixed card-size or min-width).

I hope I could have helped you a bit and wish you all the best for your further learning. Me too, I'm probably just a little beyond beginner level. Best regards from Bolivia, Harm