Interactive Rating Component using HTML, CSS Grid, Flexbox, JavaScript

Community feedback

• 

  Victor•1,035

  @CodeVeePosted over 2 years ago

  @ladking, Hi Hakeem. It seems you have done this on a private repository. Make it public so that assistance can be offered to you.

  0

  ---

  

  hakeem•30

  @ladkingPosted over 2 years ago

  @CodeVee hello Victor, I have done that, you can check it now. i really appreciate your assistance.

  0

  

  hakeem•30

  @ladkingPosted over 2 years ago

  @CodeVee hello Victor, I have done that, you can check it now. i really appreciate your assistance.

  0

  

  Victor•1,035

  @CodeVeePosted over 2 years ago

  @ladking

  • For the active/selected button, replace this btns[i].classList.toggle('click') with

  [...btns].forEach(btn => btn.classList.remove('click'));
  btns[i].classList.add('click');
  

  • For the submit btn add a property boolean set to true once any button is clicked. Then only change the display if it is true

  0

  

  hakeem•30

  @ladkingPosted over 2 years ago

  @CodeVee Thank you so much, the rating component is working perfectly now, but i don't seem to able to fix the submit button. Can you please elaborate. | Thank you for your time, i really appreciate.

  0

  

  hakeem•30

  @ladkingPosted over 2 years ago

  @CodeVee Thank you so much, the rating component is working perfectly now, but i don't seem to able to fix the submit button. Can you please elaborate. | Thank you for your time, i really appreciate.

  0

  

  Victor•1,035

  @CodeVeePosted over 2 years ago

  @ladking Update your repository and deployment so that one is not working with old code

  So with the submit button declare a variable and only set it to true in the event listener.

  let selected = false; // Declare it here
  
   for (let i = 0; i < btns.length; i++){
      btns[i].addEventListener('click', () =>{
          selected = true; // Set it to true here
          btns[i].classList.toggle('click')
  
            chosen[0].innerText = `You selected ${btns[i].id} out of 5`
     
  })    
  };
  
  
  submit[0].addEventListener('click', () =>{
     if(selected) { // Use it here
        main[0].style.display ='none'
        thanks[0].style.display = 'grid'
     }
      
      
  });
  

  Marked as helpful

  0

  

  hakeem•30

  @ladkingPosted over 2 years ago

  @CodeVee Thank you so much, it is working perfectly now and i have updated my repository

  0