Interactive rating component CSS & JS

Community feedback

• 

  P

  Dean•480

  @DeanogitPosted 11 months 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!

  1

  ---

  

  Che Fernandez•170

  @CheFernandez99Posted 11 months ago

  @Deanogit thanks man but I tried the for each it just kept making all the buttons the same click colour. But I'll research how to do this on yt

  1

  

  P

  Dean•480

  @DeanogitPosted 11 months ago

  @CheFernandez99

  You'll work it out, step by step, if you'd like to share your code here, if there's something I can help with I'll be happy to.

  0