Submitted almost 3 years ago

interactive rating componenet

accessibility

Aiyegbajeje Yusuf•100

@devsilvar

A solution to the Interactive rating component challenge

Preview Code

Solution retrospective

i Struggle to refator my javascript. i dont know how to select one of the buttons in the div box while making it turn orange.

EG i have 5 button the users can hover above. BUt when they select one it tuns orange ... now if they decide to select another button without clicking submit. it doesn't turn orange again.

just like a review stuff, that one can change from 2 to 5 start without refresigng the page

Code

Please log in to post a comment

Community feedback

Elaine•11,360
@elaineleung
Posted almost 3 years ago
Hi AIyegbajeje, this is a good try I think! I'm looking at your code, and it seems like you are writing an event listener for each button individually, and then writing out the change in inline style for each button also individually, which could easily give you errors when you're repeating so much code. What I suggest is to use a style class (maybe called active or selected) that you can add and remove to your button whenever something is clicked. Using inline styles the way you did could also be the reason why the button doesn't turn orange when selected again. Also, it would help to use for loop or even a forEach to loop through the buttons; then you don't have to write each out one by one!

Here's a CodePen I have for this challenge that might give you some ideas on how to solve this problem: https://codepen.io/elaineleung/pen/RwMqMxZ

Good luck!
Marked as helpful
HinaSejaru124•310
@HinaSejaru124
Posted almost 3 years ago
Hello if you could remove the <eb> tag and add HTML Lang="en" and avoid using inline styling it would be perfect, when added to what you have already done

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