@helenclx
Posted
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 your body
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 the submit
event when the form data is submitted.
Happy coding.
@khalagai
Posted
Thank you. Let me take up the challenge.@helenclx