Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive html, css and js Interactive card details

@Mahmoudamin11

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


feedback please

Community feedback

@aja26

Posted

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

@Mahmoudamin11

Posted

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

0

@aja26

Posted

@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

@Mahmoudamin11

Posted

@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

@Mahmoudamin11

Posted

@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

@aja26

Posted

@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

@Mahmoudamin11

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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