Interactive rating component using Flexbox and JS

Community feedback

• 

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  Hi there! You did great! I just have a few observations to make if you allow me. Firstly, you need to wrap How did we do in a h1 tag, so the accessibility report won't find any errors. You can adjust it's font size and weight via CSS. Secondly, you could apply an addEventListener to the form itself, and iterate through all radio inputs, and apply a .forEach() method, for example. Your solution has some of these suggestions implemented, but what I mean is, you can have even less code, because there are a few things that aren't needed. If you fell like, you can take a peek at my solution : ) Please , feel free to reach me out and maybe we can work together on something! Kind regards!

  1

  ---

  

  P

  Mateus Belício•710

  @mateusbelicioPosted about 2 years ago

  @WebDevCampos Thanks for the feedback! I'll try to implement this as you suggested!

  I started studying a very short time ago and I still have a lot to learn. These feedbacks are always welcome! 😁

  1

  

  P

  Mateus Belício•710

  @mateusbelicioPosted about 2 years ago

  @WebDevCampos, I implemented the code as you suggested and it got much better. Thank you for the advice!

  
  const form = document.querySelector('.c-form');
  const ratingCard = document.getElementById('rating-state');
  const thanksCard = document.getElementById('thanks-state');
  const userChoice = document.querySelector('.i-user-choice');
  
  // Event handler
  form.addEventListener('submit', (e) => {
    e.preventDefault();
  
    userChoice.textContent = form.querySelector('input[type="radio"]:checked').value;
  
    ratingCard.classList.add('hidden');
    thanksCard.classList.remove('hidden');
  });
  
  

  1

  

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  @mateusbelicio Nicely done, hats off! Happy to help. Reach me out anytime, kind regards!

  1