Brief

In this project, we're going to create a credit card form


You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this would be a great way to push yourself.

Users should be able to:

NOTE: All interactivity must be handled through JavaScript. In this challenge, we are only writing the HTML and CSS.

  • When the user finishes (blur) entering a credit card number, change the credit card image to match the type of card they entered. You can add a class of visa, mastercard, discover, or american

    • American Express cards always begin with the number 3- more specifically 34 or 37.

    • Visa cards begin with the number 4.

    • Mastercards start with the number 5.

    • Discover Cards begin with the number 6.

  • When the user enters the CVV number, have the card flip over by adding a class of flip 


Need some support on this challenge?

Upgrade to the Solution Tier. You'll get a video explanation from Amy.

Getting Started

  1. To get started, download the zip file. This includes all the project assets you need to get started: Figma file, images, and a style guide.

  2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.

  3. Open the project's README.md file. It has additional information on how the project is structured.

  4. Customize your project/file architecture to your liking.

  5. Happy coding!

  6. Once you're finished, share your work using #adventofcss


Taking your Project to the Next Level


FAQs

  • Can I use libraries/frameworks on these projects? 

    • Of course! We're providing the solution in vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.

  • Oh no! I'm stuck! 

  • Can I use this project in my portfolio? 

    • Sure! But, be honest about the work that you did