Responsive Form with Javascript Form Validation
Design comparison
Solution retrospective
Feedbacks would be appreciated. Thanks.
Community feedback
- @Blazing-MikePosted over 2 years ago
Great job you did here. Everything looks perfect, the only suggestion i have is the password input; it accepts an input of even two characters, in the password validation you can add that it returns an error for password <= 6 characters. If you want to go further you can add that it contains a combination of letters or symbols and numbers. Well-done Elizabeth
Marked as helpful1 - @LucianoDLimaPosted over 2 years ago
Good job on finishing this project!
A few suggestions:
-
Your div currently stretches as much as I can zoom out, you can avoid that by adding a
max-width: ;
in your .wrapper. For examplemax-width: 1440px;
. -
Your input's border is complete black, which makes so you can't really notice when the focus pops up once you click it. You could try implementing the :focus element. It would go like this:
You go in your CSS file and instead of hsl, you add hsla, which makes so you can change the opacity of your border, in this example I changed it to .4 (40%) ->
input { border: 1px solid hsla(249, 10%, 26%, .4);
. Then you could writeinput:focus { border-color: black }
, that way when you click on your input to write something, it will change the borders to black, and when you click away, it will change back to a weaker black, hope that makes sense.- You could do the same as i mentioned above to the placeholder, since it is a very strong black instead of a weak one like in the design. To do that you could add
input::placeholder { opacity: .5; }
.
Happy coding!
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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