Skip to content
Submitted over 2 years ago

Credit card form using plain JS and Tailwind CSS

tailwind-css
Victor•60
@movileanuv
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • What are some common practices for validating inputs with javascript and outputting error messages?
  • How do I reduce the margin bottom of the last input row to the "Confirm button" when one of the inputs is invalid? (according to the design the distance of the input field to the button is slightly smaller then the height of the error message)
Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,890
    @AdrianoEscarabote

    Hi Victor, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.
    • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

    The rest is great!

    I hope it helps... 👍

  • Flaviu Dragomir•150
    @FlaviuD94

    Hello,

    For errors I used a paragraph below the inputs with position: absolute (in this way the content do not moves when it's displayed) and display:none to hide it, after that you can use an IF statemant with a condition, for exemple (cardholdername.length < 10) and change the css display if it's true. In this way you don't need to worry about the margin topic. Take a look at mine solution for this challange. https://www.frontendmentor.io/solutions/clean-css-and-vanila-javascript-rkqzzWVs9t

    Have a nice day and enjoy!

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