Skip to content
Submitted about 2 years ago

Use Flex, Response using media query

Rohan•30
@rohananwaar
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

Q: What did you find difficult while building the project? Ans: it was an easy project in HTML and CSS, but I face difficulty in JS

Q: Is my CSS and HTML simple? Ans: yes, I try to make fewer tags and I'm just a beginner

Do you have any questions about best practices?

Can you guide me on why Number Elements (1,2,3,4,5) do not remain color after selected?

Community feedback

  • Marcell Mihály•750
    @mihalymarcell86Posted about 2 years ago

    Hello @rohananwaar,

    it seems to me, that in the setActive() function you are assigning a .selected-item class to the element that was clicked on, however there is no such class defined in your CSS. This is probably why the color doesn't stay. You only set a hover state on the buttons, but that will revert once the mouse moves out from above the object.

    I would also consider adding some error handling in this project. Note that when no rating is selected, you can still submit the form. Try to think of a way of preventing submission and alerting the user about the problem.

    To make the application more accesible, make sure to include landmarks in the HTML (like <main> and <footer>). This makes it easier for assistive technologies to parse your page.

    Nice one otherwise, keep up the good work!

    Marked as helpful
    1

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