Design comparison
SolutionDesign
Solution retrospective
Feedback will help me improve
Community feedback
- @artimysPosted almost 4 years ago
Well done Harold, looks good and is responsive.
Design Feedback:
- the styling for your
btn-trial
is better applied to your anchor tag inside. If you need to make the anchor tag behave like a div. Adddisplay: block
to your link. Currently the only section that is clickable is the text. If clicking on the purple background nothing happens. - add a focus style to your form submit. At the moment I can't see any visual cue when I tab to it.
- the "Terms and Services" usually would redirect a user to a separate page. Anchor tag with a hover state is recommended
Javascript Feedback:
-
There's two classes you toggle between in your form but I don't see any styling for
.valid
and.invalid
, could be removed. -
Add an event listener using the "submit" event instead of the
onclick=validate
. So when the form fails validation you can stop the form from submitting.
form.addEventListender("submit", validateForm); function validateForm(event) { event.preventDefault(); }
- For the error styling of the text boxes. I suggest wrapping "each field with their error span" into one div. Example below then when "First name" becomes invalid you can add the
.validate
class to the div which takes care of the error styling like the border color.
.validate { input { borderColor: "red"; } } <div id="some-identifier-for-first-name" class="validate"> <input type="text" id="fname" name="fname" placeholder="First Name"> <span id="error-fname"></span> </div> <div id="some-identifier-for-last-name"> <input type="text" name="lname" id="lname" placeholder="Last Name"> <span id="error-lname"></span> </div>
- I would challenge yourself to make a new function that accepts two arguments, the id of the field error div and an error message. That way you consolidate calling activating the error styling and messages.
Overall great job 👍👍
0 - the styling for your
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