Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive card details form with Tailwind & React Hook Form

dannebrob 130

@dannebrob

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my second big project with tailwind, If you have any tips for me, please leave a comment below. All feedback is welcome!

Community feedback

Maksim 590

@MaxTarasevich

Posted

Hi!

Good work!

But You should still work on field validation!

CARDHOLDER NAME - I can fill in completely numeric values.

EXP. DATE (MM/YY), CVC - need to be checked for data correctness and string length.

It is also worth fixing the mobile version, at a screen resolution of less than 450 the design layout breaks!

Also you forgot to delete in the App component console.log:

const onSubmit = (data, e) => console.log(data, e)
 const onError = (errors, e) => console.log(errors, e);

You have all the application code in the App component, the application is small, but it’s still worth breaking it into components. You have five states, try representing the data as an object!

I hope my feedback will be helpful!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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