solution to interactive rating component

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.... .

yeah this was super helpful thanks alot