Responsive using vanilla js and media queries

Community feedback

• 

  Kristiana12•425

  @Kristiana12

  Posted almost 3 years ago

  Hey @Akunamo,

  I did the same challenge, and I got a headache too, for almost a week. But I also learned a lot and would like to share my knowledge with you:

  About the layout:

  1. When using position: absolute with left/right in %, you should be careful because they might not look that good on bigger screens. Making an extra breaking point with fixed values should solve that problem.
  2. About the logo, what you did was clever, but in the files, there was a logo SVG file, which you could have used to spare you some code and time
  3. You could add some hover and active effect on your submit button

  About the Form:

  1. I would read the HTML issues listed and fix them. (you learn a lot through mistakes)
  2. Input type number, unfortunately, does not support maxlength and pattern attributes. I switched to input type=" text" cause I couldn't find another solution.
  3. I would consider adding some more conditions, for example: no numbers allowed on the cardholder's name field, where you expect numbers (month, year, CVC), maybe also show errors. (I used regular expressions to solve this problem via js)
  4. And also restrict the maxlength of the inputs, via type=" text" maxlength="2"

  I hope some of these suggestions might help you and give you some new ideas for your project!

  Happy Coding!

  12

  Marked as helpful