Responsive using vanilla js and media queries

Community feedback

• 

  Kristiana12•425

  @Kristiana12Posted about 2 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!

  Marked as helpful

  1

  ---

  

  Aviral•160

  @AkunamoPosted about 2 years ago

  Hey @Kristiana12

  Thanks for all these juicy advices i really appreciate it, You know what? I was just about to watch some videos on js regular expressions, because my next target project is generate random password so it's gonna help a lot.

  About Input type

  so is it alright if I use input type text instead of input type getmonth and getyear (i used these for card expire date)

  Oh and what logo were you referring to?

  As I am really hungry for all frontend knowledge and good practice tips. I am really grateful that you gone through my not so organized code deeply and spent you precious time for all these advices.

  Thank you Have a good day

  0

  

  Kristiana12•425

  @Kristiana12Posted about 2 years ago

  Hi @Akunamo

  In your code, you have this line:

  <div class="flex"> <span class="big-circle"></span> <span class="small-circle"></span> </div>

  But in your images, you have a card-logo.svg file, which you could have used instead. Maybe you missed that ;)

  As for the input types : type="getmonth" and type="getyear" are not valid there is no such type. And since you selected your elements like this: let month = document["myform"]["exp-month"].value; as long as you don't change the name="exp-month" attribute nothing will break down.

  Here is a link to all existing input types

  Keep up the great work, and enjoy coding :)

  0