Interactive rating component, responsive and using JS

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  I see in ur code that u replace the whole document by js but instead u design two cards in same containor and use js to toggle from rating card to result card ...

  //Submit btn click event 
   submitBtn.addEventListener('click', () => { 
     callBack(); 
     const newArray = [...eachBtns]; //spread operator to convert them to array 
     newArray.forEach((btn) => { 
       //checking if the user click on rating btn-at least one of it makes it true 
       if (btn.classList.contains('btn-active')) { 
         ratingCard.classList.add('hidden'); 
         selectedCard.classList.remove('hidden'); 
         home.classList.remove('hidden'); 
         errorMessage.classList.remove('error-active'); 
       } else if (!selectedCard.classList.contains('hidden')) { 
         errorMessage.classList.remove('error-active'); 
       } else { 
         errorMessage.classList.add('error-active'); 
         function hideError() { 
           errorMessage.classList.remove('error-active'); 
         } 
         setTimeout(hideError, 2000); 
       } 
     }); 
   });
  

  Marked as helpful

  0