Interactive rating component

Hey AmitKumar, how you doing? I read your code and I have some things to talk about. Just like you I started to code a few couple months ago, so if a say something wrong, I'm sorry (laughing in brazilian).

1. First, your HTML

   • It's not a good practice to use the same ID in more the one element (line 34-38).
   • Instead of using ID, you should use classes which is the semantic form
   • You can read more about semantic html here

2. CSS

   • You can use the pseudo class :hover to change the color of the button when the pointer is hovering and :active when the button is clicked instead using javascript for that

3. Your script

   • About querySelectorAll(), I did the same has you, but I use classes and not ID

   • About addEventListener(), I used click event and a for loop to verify which button was clicked and setTimeOut to return to the first page

   for (let i = 0; i < BUTTONS.length; i++) {
    BUTTONS[i].addEventListener('click', ()=> {
       
        SUBMIT.addEventListener('click', () => {
            MAIN.classList.replace('show', 'hide')
            RATED.classList.replace('hide', 'show')
   
            SCORE.innerText = `You selected ${BUTTONS[i].value} out of 5` 
   
        })
        
        setTimeout(function() {
            
            RATED.classList.replace('show', 'hide')
            MAIN.classList.replace('hide', 'show')
          }, 5000)
    })  }```
   
   
   

• There are some other things I would like to comment on, but my English is limited and I don't think I can be clear enough