solution to interactive rating component

Community feedback

• 

  Jumagobe•1,050

  @JumanjigobezPosted about 2 years ago

  Hey @iyke-e, well done! your solution seems nice but there are some improvements which could be made...

  1. Your rating app should not render thank you block if user has not selected any rating.
  2. Rate button should not remain orange if user has change his/her rating i.e. when user select two ratings then both should not have same background-color.

  In order to solve the above two points you can add some code into your JavaScript and a little bit onclick attributes into your html circles part..

  I have done it to your code this is for html changes:

              <div class="button">
                  <button class="circle" onclick="active(1)"> 1 </button>
                  <button class="circle" onclick="active(2)"> 2 </button>
                  <button class="circle" onclick="active(3)"> 3 </button>
                  <button class="circle" onclick="active(4)"> 4 </button>
                  <button class="circle" onclick="active(5)"> 5 </button>
              </div>
              <button class="submit" onclick="submit()">Submit</button>
  <div class="counter ">
                  <p> You selected <span id="result"> </span> out of 5 </p>
              </div>
  
  

  Below is for the JavaScript:

  const numRating = document.querySelectorAll('.circle');
  const starRating = document.querySelector('.countingSec');
  const thankYou = document.querySelector('.thankYou');
  const numValue = document.querySelector('#result');
  let rate = " ";//The rate value will be stored here
  
  active = (x) => {//The function for the rate buttons when clicked
         for (let i = 1; i <= 5; i++) {//since rating is from 1 to 5 we are looping till 5
                  if(i==x){//If user input matches any rating
                         numRating[i-1].style.background = "hsl(25, 97%, 53%)";
                         numRating[i-1].style.color="white";
                  }else{//else do this
                        numRating[i-1].style.background= "var(--MediumGrey)"; 
                       numRating[i-1].style.color = "var(--LightGrey)";
                  }
      }
      rate = x; //rate value sets to value x
  }
  
  
  //Function for submit
  submit = () => {
               if(rate!=" "){ //if user has selected any rating, only then do this
                       numValue.innerText = rate; 
                      starRating.hidden = true;
                      thankYou.hidden = false;
                 }else{//If user has not selected anything but clicked submit then you can do sth
                       alert("Kindly choose a rating value to proceed!");
                 }
  }
    
  

  :) Sorry for the long comment, hope it helped you to solve your issue otherwise keep coding and have a wonderful day.... .

  Marked as helpful

  0
• 

  EGWIM IKECHUKWU•630

  @iyke-ePosted about 2 years ago

  yeah this was super helpful thanks alot

  1