Responsive html, css and js Interactive card details

Community feedback

• 

  Adam Alexander•790

  @aja26Posted about 1 year ago

  hey great project!

  I noticed the form doesn't complete and i just wanted to point out something which helped me which was using regex patterns on as html attributes. Here is an example for number validation, pattern="[0-9\s]+$". Please see example below where I also show maxlength which is another type of simple validation you can use.

  <input id="card-number" pattern="[0-9\s]+$" type="text" maxlength="16" placeholder="e.g. 1234 5678 9123 0000">

  More Info: https://www.w3schools.com/tags/att_input_pattern.asp

  Marked as helpful

  0

  ---

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted about 1 year ago

  @aja26 i understood what u are saying but there is really difference if i made the regex as attribute in html ?

  0

  

  Adam Alexander•790

  @aja26Posted about 1 year ago

  @Mahmoudamin11 Yes,

  pattern="[0-9\s]+$" will only allow numbers and spaces to be submitted. So when a user goes to submit with letters it will be blocked.

  0

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted about 1 year ago

  @aja26 it's my first time to know that thank u alot is there a problem i only showing error if the user entered letter of signs i handled it with js

  0

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted about 1 year ago

  @aja26 i do have another question sorry the gradiend background on the left isn't the same colors as the design how can i get these colors cause it's n't attached in the style guide

  0

  

  Adam Alexander•790

  @aja26Posted about 1 year ago

  @Mahmoudamin11 The gradient can be used as an image background with css. There is one called 'bg-main-desktop.png', then will need to switch to a mobile version 'bg-main-mobile.png'.

  Marked as helpful

  0

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted about 1 year ago

  @aja26 Oh my god i didn't even notice these backgrounds thank you

  0