interactive-rating-component-main

Community feedback

• 

  Fox•550

  @urboifoxPosted almost 2 years ago

  Hey Pi3guss, you solution looks pretty fine heres some more tips that might interest you and help you in future projects tho😊

  • in your solution you made the numbers as buttons, and when the user focuses them then the color changes, and thats cool but heres the problem: when the user clicks outside the buttons the focus gets removed then the style also gets removed 🫤 and that is not so practical in bigger projects🫤 so heres my advice: you can add this function to your buttons

  rates.addEventListener(("click"), (e) => {
    if (e.target.classList.contains(btn)) {
      rates.forEach((rate) => {
        rate.classList.remove("active");
      })
      e.target.classList.add("active")
      rating.innerHTML = e.target.innerHTML;
    }
  })
  

  this basically add a class named active on the button you click on and removes it from the other buttons.🙌 then in your css file you can select the .active class and style it the same as the button:focus element and this should give you the same result without the click away problem 👌😁.

  • another problem is when the user doesnt choose a number he still can hit submit and send the data... in this case: the <span id="rate"></span> element will be empty in the second card🫤 to solve this problem you can check if the user selected a number then you will only excute the condition that switches the card. heres an example:

  submit.addEventListener(("click"), (e) => {
    if (rating.innerHTML !== "") {
      secondCard.classList.remove('hidden')
      mainCard.style.display = 'none'
    }
  })
  

  and I hope this solves the problem !😁📌 and i also really hope this helps you in the future and with your JS code, if you need any thing else just ask! good luck!🌹

  Marked as helpful

  0