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

Use Flex, Response using media query

Rohan 30

@rohananwaar

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


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

P

@mihalymarcell86

Posted

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