Design comparison
Solution retrospective
Being able to select a rating independently.
What challenges did you encounter, and how did you overcome them?- Having to select a rating independently. Opted to add the onclick property to each rating.
Community feedback
- @helenclxPosted 3 months ago
Good work in completing the project. There are ways that you can improve your solution:
Use semantic HTML to convey the meaning and purpose of different parts of your page, including to assistive technologies, by using the
<main>
tag for your main container and using the<footer>
tag for your attribution. You can check out these links to learn more about semantic HTML and why to use them:You may remove the white borders and make your background colour cover the entire page, by adding a
margin: 0
to yourbody
element's CSS.Code this rating component as a form, by using
<form>
with a fieldset of radio<inputs>
, instead of<div>
elements with multiple<button>
s, since this is challenge is a practice of creating a rating form.This will involve rewriting much of your HTML and JavaScript, and you will need to look up how to accessibly style them as well. Modern CSS has an article for this: Pure CSS Custom Styled Radio Buttons. Using a
<form>
element allows your JavaScript to just listen to thesubmit
event when the form data is submitted.Happy coding.
1 - @mugiwara1995Posted 3 months ago
Congrats on completing this project.
0
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