Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Component rating

khalagai 300

@khalagai

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

@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.

1

khalagai 300

@khalagai

Posted

Thank you. Let me take up the challenge.@helenclx

0

@mugiwara1995

Posted

Congrats on completing this project.

0

khalagai 300

@khalagai

Posted

Thank you.@mugiwara1995

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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