Skip to content
Submitted over 1 year ago

Responsive Interactive Rating Component

Paul•470
@mayor-creator
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello,

I completed my first JS project. While building this project, I found it difficult to style the buttons and rating paragraph after the submit button is clicked.

Any suggestion on how to improve this or my code will be appreciated. Thank you.

Community feedback

  • Tommy Miguel•300
    @CodingTimmyethPosted over 1 year ago

    Hey! I had the same issue with the background color for the icon and the numbers. The way I figured it out was by using the $darkBlue variable and changing the last percentage to 21% and it worked pretty well for me!

    Marked as helpful
    1
  • バレンタイン 😈•64,190
    @VCaramesPosted over 1 year ago

    Hey there! 👋 Here is some feedback to further improve your code:

    • This LINK is not necessary ❌.
    • The “icons/illustrations” in this component are purely decorative. ⚠️ Their alt tag should be left blank to hide them from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:

    To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

    1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
    2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
    3. The last thing you will want to include will be a button so users can submit their choice.

    Here is how it looks like fully implemented: EXAMPLE

    More Info: 📚

    MDN: Form Element

    MDN: <input type="radio">

    MDN: Field Set Element

    • Once the top is implemented , for your JS, the eventListener should be on the form ⚠️ as a submit.

    More Info:📚

    Click vs. Submit EventListeners

    If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

    Happy Coding! 😈

    Marked as helpful
    1
    Paul•470
    @mayor-creatorPosted over 1 year ago

    @vcarames Thank you for the informative feedback. Can you please explain why using the button element for the rating in the HTML was incorrect?

    0
    バレンタイン 😈•64,190
    @VCaramesPosted over 1 year ago

    @mayor-creator

    buttons are for single actions; submitting a form, adding to cart, etc...

    radios are for selecting a single option from a group... like this challenge requires you too.

    Marked as helpful
    1
    Paul•470
    @mayor-creatorPosted over 1 year ago

    @vcarames Thank you.

    0

Please log in to post a comment

Log in with GitHub

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