@Mahmoudamin11
Latest comments
- @aja26
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 - @nivrii@aja26
Hey, Great attempt here.
Have you looked into making it responsive? One thing you could look at is using media queries. Please find a guide below:
https://www.w3schools.com/cssref/css3_pr_mediaquery.php
It works based on the pixel width of the browser and you add css rules for smaller browser sizes.
Marked as helpful - @ShaktawatCode@aja26
hey,
Try making your QR code image have a width of 100% and remove the margin. Then remove the padding left on the .box and add one value for all your padding. See below.
.box { background-color: #ffffff; border-radius: 15px; /* padding-left: 15px; / max-width: 345px; height: 570px; box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%); text-align: center; / display: flex; */ padding: 1rem; }
img { width: 100%; /* margin-top: 15px; / / margin-right: 13px; / / margin-bottom: 10px; */ border-radius: 15px; }
- @Semi-Square@aja26
hey, the number isn't saving when I click on a number, Have you looked at adding javascript?
This is a great place to learn some basics if you have not got to javascript yet: https://www.w3schools.com/js/
You should look into click events and how to save the outcome of your click in a variable so that the second card and show you what review score that user selected.
Marked as helpful
