interactive-rating-component using DOM and module js

these helps me to practice a basics of javascript methods specially forEach method ,by selecting the parent container and then accessing each and every elment of that item .and also displaying the dataset-id in the result section of card. the parent container for rating btns is

  <div class="rating-container">
    <button class="btn btn-rating" data-id="1">1</button>
    <button class="btn btn-rating" data-id="2">2</button>
    <button class="btn btn-rating" data-id="3">3</button>
    <button class="btn btn-rating" data-id="4">4</button>
    <button class="btn btn-rating" data-id="5">5</button>
  </div>

and the result card should be set like these by default when we acess the DOM we remove these classlist and then add it to the rating card thats the whole logic in the css

.hidden {
  opacity: 0;
  display: none;
}

the main logic in the js is printing the data-set id of the given btn and then print it to the result card

//remove active state from btns
eachBtns.forEach((btn) => {
  btn.classList.remove('btn-active');
  e.target.classList.add('btn-active');
  textResult.innerHTML = `You selected ${id} out of 5`; //printing the selected value to result
});

and also i added a little bit of code for to go back home page and to clear the rating buttons active class .