Doesnt work

Community feedback

• 

  P

  Azzumar•340

  @Azzumarithm

  Posted about 2 years ago

  Hey congrats for finishing this challenge. Here are some suggestions that you can try out:

  I suggest you to understand my explanation first and try to create your own solution before looking at my code here:

  if you want to add the styling when you click it the rating number, you can do it using JS. Firstly, you need to make sure that every rating number element has a default class which is class = "rating-number". Then whenever you click on it you want to add the another class which is "active" using JS so now one of the rating number elements will have class = "rating-number active". Make sure you already apply styling to .rating-number.active like this. Make sure that you also create a variable called selectedNumber to store the rating Number value so that after you submit it you can use it in the thank you container by using template literal by using 'You Selected ${selectedNumber} out of 5' (I can't use the backtick ` symbol so I substitute it with ' ):

  Then if you want to remove the styling you just have to loop all .rating-number elements using forEach (outer loop) and then you also want to nest another forEach (inner loop) to remove any styling to any of the elements that contains "active" class. The outer loop will add "active" class to the selected ratingNumber and The inner loop will remove the "active" class from any of the ratingNumber elements. Make sure to execute the inner loop first within the outer loop before adding the "active" class to the selected rating number element.

  If you want to remove the display of a container or make it appear, you can use display : none; (remove) ; or display : block or flex (appear); . You can only change the display styling of the container if the selectedNumber is not undefined meaning you can't submit it if you don't select any of the rating Number.

  /* Default styling*/
  .rating-number {
    color: grey; (or whatever color you're using)
  }
  
  /* Changing the color when "active" class is added to one of the .rating-number elements*/
  .rating-number.active{
      color: orange;
  }
  
  

  ratingNumbers.forEach(function(ratingNumber) {
      ratingNumber.addEventListener("click", function(e) {
          // Remove 'selected' class from all numbers
          ratingNumber.forEach(function(ratingNumber) {
              ratingNumber.classList.remove("active");
          });
          
          // Add 'selected' class to the clicked number
          ratingNumber.classList.add("selected");
          
          // Set selectedValue to the clicked number's text content
          selectedValue = ratingNumber.textContent;
          
      });
  });
  

  submitButton.addEventListener("click", function(e){
      e.preventDefault();
  
  
      if (selectedValue !== undefined) {
          
          ratingContainer.style.display = 'none';
          thanksContainer.style.display = 'flex';
          descriptionSelection.textContent = `You selected ${selectedValue} out of 5`;
      }
  
      
   });
  
  
  

  Good luck in your coding journey

  02