Frontend Mentor | Interactive Card Details Form- React, Tailwind, Vite coding challenge solution

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! :)

Community feedback

Katja Danilova• 340

@katjadanilova

Posted over 1 year ago

Hi, Eileen!

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

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;
based on my short research, I discovered that bank card numbers can have up to 19 digits;
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

Eileen dangelo• 1,600

@Eileenpk

Posted over 1 year ago

Hi @katjadanilova,

Thanks for reviewing my code, I was looking at your solution for this project this morning and was impressed with your solution!

That's a good catch about the sizing of the inputs and buttons when an error is present, and the card expiration being able to be in the past. I'll fix those bugs.

I had given the card number format a lot of thought, and I landed on the 16 digit format because when working with a real credit card company they would have a set card format that was a project requirement., So I just assumed that the requirement was 16 digits like the design.

I also like your alternative code to formatting the card number. 🙂

Thanks for the help!

Interactive Card Details Form- React, Tailwind, Vite

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community