Skip to content
Submitted almost 2 years ago

Interactive Card Details Form- React, Tailwind, Vite

Eileen dangelo•1,600
@Eileenpk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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
    @katjadanilovaPosted almost 2 years 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:

    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
    0
    Eileen dangelo•1,600
    @EileenpkPosted almost 2 years 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!

    0

Please log in to post a comment

Log in with GitHub

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