@Kristiana12
Posted
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:
- When using
position: absolutewith 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. - 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
- You could add some hover and active effect on your submit button
About the Form:
- I would read the HTML issues listed and fix them. (you learn a lot through mistakes)
- Input type number, unfortunately, does not support maxlength and pattern attributes. I switched to input
type=" text"cause I couldn't find another solution. - 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)
- 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
@Akunamo
Posted
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
@Kristiana12
Posted
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 :)
