Design comparison
Solution retrospective
I am still a beginner in coding, hoping for feedback. :)))
Community feedback
- @amyspencerprojectPosted about 1 year ago
Hi Airus,
Nice work!
A few things you might want to look into. You used a form but then used a "click" for your event listener. Try using "submit" instead. This makes the form accessible for keyboard commands not just a mouse click. You would put a
type=submit
on the button and then have the event listener on the<form>
div.Your error message is not the custom one in the design but the one provided by the browser. To use a custom message you would want to add a "nonvalidate" attribute to your
<form>
div and then you would be able to add the color changes to the input field and have a custom message pop up in UI. When you do a custom error message you should also add accessibility attributes to the<p>
div. So addingrole="alert"
andaria-live="polite"
makes your error message much better for screen readers.I noticed you don't use a CSS reset. It is a good idea to use one especially when you start customizing the UI. Andy Bell has a good, https://andy-bell.co.uk/a-modern-css-reset/
Hope this helps you on your coding journey!
Marked as helpful1
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