Credit card form using plain JS and Tailwind CSS

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  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... 👍

  1
• 

  Flaviu Dragomir•150

  @FlaviuD94Posted about 2 years ago

  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!

  1