Interactive rating component using html-css-Js

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  Hello hussen great work on a design and also the error message ... but when we come to the radio btns there is a bug to fix ... when i try to click on btn it make all the other smaller than the clicked btns active .. and it shouldn't be like that use querySelectorAll to grab all radio btns and since they are nodelist use forEach method to iterate over and to close the active btn(if there is already active btn other than the user click) and adding the active class to the radio btn that is currently clicked (e.target) ...

  The forEach code snippets is

         //remove active state from btns 
         eachBtns.forEach((btn) => { 
           btn.classList.remove('btn-active'); 
           e.target.classList.add('btn-active');    
  

  ...the full code snippets is here

  function callBack() { 
     //logic-when we click on the btns container[ratingbtns] 
     ratingBtns.addEventListener('click', (e) => { 
       const id = e.target.dataset.id; 
       console.log(id); 
       if (id) { 
         //remove active state from btns 
         eachBtns.forEach((btn) => { 
           btn.classList.remove('btn-active'); 
           e.target.classList.add('btn-active'); 
           textResult.innerHTML = `You selected <span class="result-number"> ${id}</span> out of 5`; //printing the selected value to result 
         }); 
       } 
     }); 
   }
  

  0