Rating component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Axel, great job getting the challenge done! congratulations

  First of all let me try to solve your issue with the submit button:

  You can add a simple if check to see if the 'rate' <span> has a value, you should add that if check, in your submitBtn function, it should look something like this (didn't test my self but if you have problems I can also try to get a pull request for you if needed):

  submitBtn.addEventListener("click", () => {
      if(!rating.innerHTML) return alert('Please select a rating') 
      thankCard.classList.remove("hidden");
      mainCard.classList.add("hidden");
  });
  

  This should stop the submitBtn before showing up the thanks card and show an alert popup, if a rating is selected the if check would be a false value and it will get ignored!

  • Another thing that I would add to your project (wich is just a little change, but worth it), would be to add some cursor: pointer on your rating buttons!, making a better user experience, and get them to look more 'clickable'.

  Hope my answer helps you, if you have any questions or need help to implement it, don't hesitate to ask me! great work!

  Quick edit:

  Since you also have a submit again functionality, you should also be aware of clearing the previous rating:

  rateAgain.addEventListener("click", () => {
      rating.innerHTML = '';
      mainCard.classList.remove("hidden");
      thankCard.classList.add("hidden");
  });
  

  Marked as helpful

  1

  ---

  

  Axel•250

  @AxlMrtPosted about 2 years ago

  @DavidMorgade

  The solution works well and thank for telling me to clean the innerHTML, i would have forget.. I also add the cursor.

  Thank you a lot for all your advices !

  1