Interactive rating component CSS & JS

Community feedback

• 

  P

  Dean•510

  @Deanogit

  Posted over 1 year ago

  Hi @CheFernandez99

  Great looking solution, well done!

  I was just taking a look at your solution and your question how to make the background colour on the rating buttons disappear when another button is clicked.

  In order to reset the state of all the buttons, you'll need to write some JavaScript and access the DOM (Document Object Model).

  One way to do this would be to

  • Connect to your buttons using querySelectorAll()

  const btns = document.querySelectorAll('.btn')

  • Loop through the btns and "listen" out for clicks using an addEventListener

  btns.forEach((btn) => {
  btn.addEventListener('click', function() }
  

  • When a button is clicked a function can be fired off to reset the state of all the buttons.

  You'll need to write a function to reset the state.

  • Then the button that is clicked can be highlighted.

  I find that writing JavaScript and getting logic flow can get quite complicated pretty quickly, my advice would be to try to do only one thing at a time.

  If this all sounds completely foreign to you, don't worry, with time and practice, it is possible to learn these patterns.

  I hope this helps

  Above all, your solution is looking great, well done!

  12