Skip to content
Submitted over 2 years ago

Interactive Card Details Form- React, Tailwind, Vite

accessibility, react, tailwind-css, vite
Eileen dangelo•1,600
@Eileenpk
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This project involved creating a form for entering credit card details, using a mobile-first workflow and semantic HTML5 markup. I used CSS custom properties and Tailwind CSS to style the form and make it responsive to different screen sizes.

The form included fields for entering the cardholder's name, card number, expiration date, and CVV code. I implemented validation for these fields, ensuring that the user could not submit the form with invalid or incomplete data.

I used React.js to add interactivity to the form, allowing the user to easily input and edit their card details. This included formatting the card number as the user types it and displaying it on the credit card preview.

Any feedback and or comments are very welcome, I'm always trying to hone my skills! :)

Code

Please log in to post a comment

Log in

Community feedback

  • Katja Danilova•340
    @katjadanilova

    Hi, Eileen!

    I reviewed your solution after completing my own and found it to be really good! I noticed a few things, such as:

    1. inputs and button heights appearing shorter when errors are present (I'm not familiar with Tailwind, so I'm unsure of the cause) then when there are no errors;
    2. based on my short research, I discovered that bank card numbers can have up to 19 digits;
    3. expiration year in your solution can currently be in the past.

    I appreciated your method of formatting the card number. I came up with a slightly different one, and it's always enlightening to have alternatives :) here is mine: value.replace(/\s/g, "").match(/.{1,4}/g)?.join(" ")

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord