@vinuman
Posted
Hello,
Good job completing the project.
To let the user know which button they have selected currently, update the JS like this,
Select all the buttons grouped under the class 'selections'. Declare a variable for the current active button. Add an event listener on the selections and declare the target. If the target has 'Button', apply background color and color properties to the target. Before executing this, check if there already exists an active button. If so, remove the background color and color of the same. Finally make the current target active button.:
Code: let activeButton;
selection.addEventListener('click', function(e){ const target = e.target;
if(target.matches('Button')){ if(activeButton) { activeButton.style.backgroundColor = ''; activeButton.style.color = ''; } target.style.backgroundColor = '#979797'; target.style.color = '#fff'; activeButton = target; } });
Hope this help. Happy coding!!!
Marked as helpful
@samoina
Posted
@vinuman
Hi Vinu! Thank you for this feedback. I got a bit lost in this code snippet:
if(target.matches('Button'))..
what does 'Button' reference?
EDITED: I did figure it out and realized I was initially lost because my rating numbers were enclosed within list items <li> . But I updated the code so that the user sees their selection.
Again, thanks for the feedback - this was helpful.
