Interactive rating component using JavaScript and CSS Grid

Community feedback

• 

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  Hello there 👋

  Congratulations on completing the challenge

  *here is a quick fix to center the number in the middle of the circle

  ⫸ In your style.css inside .rtng-btn element selector

  • remove padding-top: 0.2rem;

  • add width: 3em;

  now it should fix the centering issue and create a perfect circle 🔥👍

  Here is something I noticed in your project that needs a fix

  • The user shouldn't be able to submit a rating without selecting any. But, if you notice in your implementation when you click the submit button. It just displays You selected out of 5. But we don't want that to happen. Users shouldn't be able to submit without selecting a rating.

  Follow this quick fix to overcome the issue 👇

  • In the index.js file in line 7 we have the event listener on submit button

  replace

  sbmtBtn.addEventListener("click", function () {
          thankYou.classList.remove("hide");
          mainBox.classList.add("hide");
      });
  

  with this

  sbmtBtn.addEventListener("click", function () {
      if (rating.innerText === ''){
          
      } else {
          thankYou.classList.remove("hide");
          mainBox.classList.add("hide");
      }
          
      });
  

  We are basically telling if the actual rating is empty then do nothing, if it has a value selected display the thank you page.

  Now it should have fixed the issue 🔥👍

  I hope this was useful 😊

  HAPPY CODING

  Marked as helpful

  0