Interactive rating component

Community feedback

• 

  Mike de Sousa•120

  @mikedsousa

  Posted over 1 year ago

  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

  20

  Marked as helpful