Design comparison
Solution retrospective
Hi, look at my solution to this challenge, I had some issues to solve the form with validation , but I found a code in bootstrap docs, so, waiting for any help to improve the code....
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @EddySea69, Congratulations on completing this challenge!
Great code and great solution! Iβve few suggestions for you that you can consider adding to your code:
1.Add the hover states to improve the interaction in the button.
2.Add the website favicon inserting the svg image inside the
<head>.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">3.
IMPROVE YOUR WORKFLOWusing VSCODE you can code your whole page usingpxand then in the end use a plugin called px to rem here's the link β https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-remβοΈ I hope this helps you and happy coding!
Marked as helpful0@EddySea69Posted about 2 years ago@correlucas wow, I didn't have idea about this plugin, thank you very much
1 - @VCaramesPosted about 2 years ago
Hey @EddySea69, great job on this project!
Some suggestions to improve you code:
- Currently, your code isn't properly validating the inputs.
For the first/last names, I can type in only numbers and your code accepts it. For your password input, if I type in only number (by itself) your code accepts it. The only one that seems to be working is the email input.
To fix, you want to set up your inputs in this manner:
<input type="text" name="firstName" id="firstName" placeholder="First Name" required pattern="[A-Za-z]+" /> <input type="text" name="lastName" id="lastName" placeholder="Last Name" required pattern="[A-Za-z]+" />The pattern="[A-Za-z]+" ensures that your users only input letters only for their names.
<div> <input type="email" name="email" id="email" placeholder="Email Address" required /></div> <input type="password" name="password" id="password" placeholder="Password" required minlength="8" autocomplete="new-password" />For the password, you'll notice the minlength="8" and autocomplete="new-password".
the minlength tells the browser that the password has to be a minimum of 8 characters.
The autocomplete="new-password" helps browser in proving users with strong passwords.
You'll also notice that each input has a required attribute, this attribute tells the browser that this field is required.
I'll include a link with more detail. This is from Google themselves for their developers.
Source: **https://web.dev/learn/forms/
Happy Coding!
Marked as helpful0@EddySea69Posted about 2 years ago@vcarames you're right, I really need that... Thank you, I'll do it soon as possible.π
0
Please log in to post a comment
Log in with GitHub
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