Being able to select a rating independently.
What challenges did you encounter, and how did you overcome them?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.
Congratulations on completing your first challenge!
You may use different semantic HTML elements for various parts of your page, such as <main> for your main content and <footer> for the attribution. For more about Semantic HTML and why to use them:
To improve the responsiveness of your web page, use relative units like rem or em instead of px which is an absolute unit. You can read more about CSS units, including relative units and absolute units here: Learn CSS Units – Em, Rem, VH, and VW with Code Examples
Happy coding!
Hi, the images are not visible in your live site because in your HTML, you set the images' relative paths as /, which represents the root directory, meaning when you deployed your files, the deployed site is trying to look for images located at https://amaar09.github.io/assets/images/icon-reaction.svg, ignoring your Results-summary-component folder.
On the other hand, the images were visible in your PC might be because Results-summary-component is a root folder in your PC.
To solve this issue, try changing the paths of your images to ./, by adding a dot before the slash, which represents current working directory, for example ./assets/images/icon-memory.svg. This should make your deployed site look for the image files in your Results-summary-component folder.
You can read more about HTML file paths here: HTML File Paths
